DEV Community: Jérémy Lal

template engines still ignore the power of the DOM

Jérémy Lal — Sun, 20 Jan 2019 00:19:24 +0000

I need you to leave php-thinking today.
Why ?
Because that kind of thinking makes you build "string-based" template engines, and this is bad.

Obviously it's bad security-wise, string-based engines don't know where they're
merging data in an attribute, a tag name, pure text, or html.
They have a hard time keeping it right because the DOM evolves too fast for them.

The DOM should come first, then templating after.
Embrace the DOM. Don't try:

hyperhtml
marko because they're just fiddling around the DOM.

I've been trying to make something purely DOM based:
https://github.com/kapouer/matchdom

however, i recognize the API is odd.

Please help me improve it if you're motivated !

CAA records only have a meaning in a world without free SSL providers

Jérémy Lal — Sat, 19 Jan 2019 23:47:22 +0000

thatsheepdomain.com CAA 0 "evilexpensiveauthority.com"

A good-looking https://tools.ietf.org/html/rfc6844 came out five years ago: DNS CAA.
That looks cool, and even ssllabs has a warning shown when it's not there.

I thought it was awesome and lobbied around to support this !

Except that today i'm here to warn you about that thing.

CAA record is meant for organisations to make sure everyone within is using the same SSL certificate authority for the websites under a given root domain name.

All contractors providing xxx.thatsheepdomain.com need to get certificates from "evilexpensiveauthority.com".

This often is enforced as a company policy, to make sure there's only one provider of certificates - and only one way to deal with those scary certificates - after all, failing to update them can break a service.

That kind of internal company policy has always been around, sometimes for very good reasons, and now it can be enforced by an official standard. There are tractations to make browsers use it. Mozilla accepted it, let's encrypt honors it.

Looks good ?

But hell is in the details.

For some years Let's encrypt + open-source acme protocol + open-source certbot client (or any other acme-compatible client) has been delivering hundreds of millions of free SSL certificates, prompting "Legacy" companies (the ones asking for money, and whose employees wrote the RFC about CAA, just check the link) to push their customers to use CAA records, as a reaction to the unbearable open and free movement.

I suppose the non-free companies use the "be scared of security issues" tactic.
Please quickly enforce a company policy or face hell.
A company adopting such a policy will make sure there is no disparate SSL authorities contractors.

Q.E.D.

CAA records only have a meaning in a world without free SSL providers.

use conditional breakpoints to call console.log

Jérémy Lal — Wed, 07 Nov 2018 11:19:58 +0000

This is something so simple i wonder why i did not think of it before:

Unite Server-Side rendering and Single-Page applications

Jérémy Lal — Sun, 29 Jul 2018 13:22:56 +0000

This sums up my findings when writing https://github.com/kapouer/window-page.

A web page is defined by its url pathname and query.

phases

· route

Bootstrap initial document that loads scripts and stylesheets.

· build

Scripts and stylesheets loaded during route are available.

Build document depending on pathname.

· patch

Document has been built.

Modify document depending on query.

· setup

Initialize User Interface (animations and stuff).

· close

Cleanup User Interface.

Unregister event listeners on document's body.

prerendering

document.visibilityState == "prerendering"

Two equivalent scenarios:

server-side prerendering (jsdom...)
browser prerendering (safari...)

The functions bound to these phases must be run:

route
build
patch

and document is serialized as HTML.

rendering

All other cases.

Prerendered HTML is loaded along with scripts and styles, then the functions bound to these phases must be run:

setup

navigation

Can happen through History API, or by following links, submitting forms, etc...
All of which must be properly intercepted.

If only current query changes, only the functions bound to this phase must be run:

patch

Otherwise it is:

close
route
build
patch
setup

Or, if route replaces current document by fetching a prerendered document:

close
route
setup

credentials

route, build, patch phases will typically fetch data through HTTP: credentials can be passed along to these requests if needed.

custom elements reacting to patch phase (query changes)

In this framework it must be done manually, either by calling directly an element's update method, or firing an event on current document, or delegating to a singleton manager.

additional comments

at the time of writing the module, asynchronous events were not a thing yet, so i had to implement my own promise chains and double them with synchronous events to be able to listen for changes even before the router library was not yet loaded (which can be needed when doing complicated stuff with iframes).