Validate the wrapped HTML

Ein Text-Adventure-Lernspiel für die Datenbanksprache SQL

Step into a smoky 80s detective agency, question suspects with SQL queries, and crack the case one statement at a time.

We can use the oklch (OK L C H) and adjust the lightness and chroma from the hue, thus generating colors.

Creating colors from oklch is tedious, but they can derivated from other color codes from [#007ab8](https://shaarli.lyokolux.space/./add-tag/007ab8) calc(l - 0.05) c h)

Tip: very light and very dark lightness levels have a tendency to look oversaturated.. a lot of color palettes look more cohesive when you reduce the chroma slightly as you move away from the middle-range of lightness towards the edges.

Example: https://codepen.io/cferdinandi/pen/zxoYpeL

This example is good for dynamic colors.

Following the basics of anchor positioning, there are many more use cases for this layout specification. Note this is not supported by browsers yet.

Logical properties can be used for the alignment.

position-try-fallbacks can be defined by the developer with @position-try. It accepts few rules: inset properties, margins, sizing, self-alignment, position-anchor, position-area.

For a website build

For local development, this has been a big win. Re-rendering all the HTML pages used to take about 15 seconds, but with a warm cache it takes 0.06 seconds. That’s a 200× speedup that I feel every time I hit save, and it’s made working on this site a smoother and more satisfying experience.

body:has(li:hover) li:not(:hover){
    opacity:0.5;
    transition: opacity 500ms;
}

Highlight the hovered element of a list by hiding the others

About the <picture> syntax which the author finds great.

On the contrary, the srcset and sizes attributes on one image are hard to use. "So, we are left describing the all of the sizes that an element will be, across every breakpoint and container query, as a single string, in an HTML attribute. How disgusting."

A tool is neede to write media queries in the sizes attribute.

How is a tool supposed to generate (min-width: 1340px) 257px, (min-width: 1040px) calc(24.64vw - 68px), (min-width: 360px) calc(28.64vw - 17px), 80px though?

The author proposes to bury this attribute and use sizes="auto". The developer can rely on loading="lazy" to load the images after the layout is computed, thus the browser know the size in advance.
sizes values remain a must have for images displayed way up at the top of the page... well sizes="100vw" is a good fit for it, isn't it?
All other images? loading="lazy" sizes="auto"

The idea seems good. Another ID format: 16 bytes like UUID v4 and v7. The key difference is they are monotonic, but that's something UUID v7 and ULID can have.

The structure:

Timestamp: 8 chars · ms since epoch · good until year 6028
Counter: 6 chars · randomly seeded · monotonic
Random: 7 chars · cryptographically secure randomness

The landing page uses catchy things without real correlation: 23M SparkIDs/sec in Rust. Ok but with which hardware?

hashing: SHA-512
Password or one time code hashing: Argo2id
Key derivation: SHAKE256 or HKDF-SHA512
Api key: prefix + version + Base32LowerCase.encode(UUID || 32-byte secret); hash function: SHAKE256 with a 512 bit output, or SHA3-512 or SHA-512

Encryption: AES-256 has too short nonces, jey / nonce reuse is catastrophic and it's also lacking context commitment. XChaCha20-Poly1305 lacks context commitment, that's why ChaCha20-BLAKE3 is recommended.

Encrypting secrets: use a Key Management Service

Symmetric Key signature: HMAC-SHA512
Asymmetric key signature: ML-DSA-65, or ML-DSA-87
JSON Web TOkens: ML-DSA-65 for asymmetric signatures or HMAC-SHA512 for symmetric signatures

End-to-end encryption

While you probably need more advanced protocols for your specific use case (e.g. The Messaging Layer Security (MLS) Protocol, RFC 9420, for messaging), basic end-to-end encryption to a public key has been standardized in RFC 9180 - Hybrid Public Key Encryption (HPKE). In this context hybrid means that we combine both symmetric and asymmetric cryptography.
Therefore, I recommend the following algorithms for use with HPKE to encrypt data to a public key:

• KEM: X-Wing
• AEAD: AES-256-GCM
• KDF: HKDF-SHA512

TLS

Today, the only quantum-resistant key exchange algorithm available for TLS is the hybrid X25519MLKEM768. Ensure that your load balancers / reverse proxies support it.

# the api key generation
fn hash_api_key(api_key_id: Uuid, version i16, organization_id: Uuid, secret: &[u8]) -> [u8; API_KEY_HASH_SIZE] {
    let mut hasher = sha3::Sha3_512::new();

    hasher.write(api_key_id.as_bytes());
    hasher.write(&version.to_le_bytes());
    hasher.write(organization_id.as_bytes());
    hasher.write(secret);

    return hasher.sum();
}

the storage in the database

CREATE TABLE api_keys (
  id UUID PRIMARY KEY,
  created_at TIMESTAMP WITH TIME ZONE NOT NULL,
  updated_at TIMESTAMP WITH TIME ZONE NOT NULL,

  name TEXT NOT NULL,
  expires_at TIMESTAMP WITH TIME ZONE,
  version SMALLINT NOT NULL,
  secret_hash BYTEA NOT NULL,

  organization_id UUID NOT NULL REFERENCES organizations(id) ON DELETE CASCADE,

  UNIQUE (name, organization_id)
);
CREATE INDEX index_api_keys_on_organization_id_and_expires_at ON api_keys (organization_id, expires_at);

The cost of indexing: it uses more storage to use the data structure. A table with eight indexes has nine things to keep warm in cache, not just one. The more indexes you have, the more options the query planner must weighs.

Why index is not working?

• composite indexes care about order
• functions defeat the index: case-insensitive does not match an index created on the fly. It applies to any function wrapping the column.

How to avoid these pitfalls? Measure.
There is the tool EXPLAIN in Postgres telling how it plans to run a query. Using it before the query explains it :) The Index Scan instruction is what is looked for.
EXPLAIN ANALYZE runs the query and reports what happened.

Things nobody shares:

functional indexes
CREATE INDEX ON pokemon (lower(name));
but why are the data not stored in lowercase in the first case

partial indexes
avoid a full index
CREATE INDEX ON pokemon (name) WHERE is_legendary = true;

covering indexes
If the index already contains every column the query needs, the database can answer the query from the index alone, never touching the table.
CREATE INDEX ON pokemon (name) INCLUDE (base_attack);. INCLUDE is a way to say “carry this column along for the ride, but don’t bother sorting by it”. Use it if the columns whose data types don’t have an appropriate operator class for the index type, or add columns to a unique index without changing its uniqueness semantic.

JavaScript Patterns Patterns focused on plain Javascript and Node.js

A great FAQs. CommonJS and ESM is still a mess, especially. Yes I am looking at you NestJS.

Topics covered:
How can I move my CommonJS project to ESM?
Can I import ESM packages in my TypeScript project?
How can I make my TypeScript project output ESM?
How can I import ESM in Electron?
I'm having problems with ESM and Jest

1. Implement the Copy trait
2. Take parameters by reference
3. Use the proper iterator
4. Have closures capturing by value also return the value

It's self-explanatory based on the semantic!

The bun single binary performs better!

An introduction from unsafe to safe Rust lifetimes

The boilerplate needed, the first metadata title, link, description and the many additional optional values.
Dates in RSS conform to RFC 882

Each RSS feed has items. Each feed can contain the entire content, unabridged, or a summary of the content and that it should be read on the site.

Atom is XML-based but is a little bit stricter and more finely specced than RSS.

JSON feed is the newest format discussed around. It has similarly.

RSS can be auto-discovered with the link tag in HTML.

Gotchas:

• use absolute URLs for media in the RSS feed. RSS Readers can be disconnected from the origianl domain.
• escape HTML entities in XML or use CDATA wrappers.
• Web-based RSS readers have CORS rules to follow. Setting an Access-Control-Allow-Origin: * is mandatory header on your XML/JSON files ensures these web-based clients don’t get blocked by security policies.
• the readers have limited display
• validation via the W3C Feed Validation Service or the JSON Feed Validator.

Read the RSS 2.0 Specification, the Introduction to Atom, the RFC 4287: The atom syndication format or the JSON feed version 1.1 Explainer.