Andre Wiggins andrewiggins

DOM Audit Logger

A little library for auditing DOM modifications.

Features

Tracks DOM modifications (textContent, innerHTML, className)
Extensible audit system for custom operations
Formatted audit trail output
Event-based subscription for real-time monitoring

Originally posted at https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2011/august/javascript-cryptography-considered-harmful/

Javascript Cryptography Considered Harmful

WHAT DO YOU MEAN, "JAVASCRIPT CRYPTOGRAPHY"?

We mean attempts to implement security features in browsers using cryptographic algoritms implemented in whole or in part in Javascript.

You may now be asking yourself, "What about Node.js? What about non-browser Javascript?". Non-browser Javascript cryptography is perilous, but not doomed. For the rest of this document, we're referring to browser Javascript when we discuss Javascript cryptography.

Modernizing a codebase for C# 9

There are lots of cases that you can improve. The examples use nullable reference types, but only the WhenNotNull example requires it.

Use the property pattern to replace `IsNullorEmpty`

Consider adopting the new property pattern, wherever you use IsNullOrEmpty.

string? hello = "hello world";

A Small HTM VM FTW OMG BBQ

This is a half-baked sketch of compiling HTM expressions into a list of instructions that can be interpreted in runtime with a compact function. The instructions hopefully compress well and the evaluation function should be not-slow. Maybe.

evaluate.js contains the evaluation function (evaluate(...)) as well as an example of a compiled HTM call.
babel.js contains a Babel plugin that transforms HTM calls into the stack language. The build.mjs file it imports is HTM's src/build.mjs.

This tweet demonstrates that a minified evaluate() fits in one tweet: https://twitter.com/jviide/status/1257755526722662405 🙂

Standalone forwardRef

import { forwardRef } from 'preact-forwardref';

const Foo = forwardRef((props, ref) => {
  return <div ref={ref} />
});

render( console.log(div)} /&gt;, document.body);

PreactX Upgrade Experience

Obvious breaking changes

See release 10.0.0-alpha.0 for a full list.

h -> createElement
VNode.nodeName -> VNode.type
VNode.attributes -> VNode.props
VNode.children -> VNode.props.children

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Single File Web Component</title>
	</head>
	<body>
	<template id=single-file>
	<style>
	h1 {

	/* eslint-disable no-unused-vars */
	/* eslint-disable no-else-return */

	// JSX constructor, similar to createElement()
	export const h = (type, props, ...children) => {
	return {
	type,
	// Props will be an object for components and DOM nodes, but a string for
	// text nodes
	props,

	export const h=(t,p,...c)=>({t,p,c,k:p&&p.key})
	export const render=(e,d,t=d.t\|\|(d.t={}),p,r,c,m,y)=>
	// arrays
	e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])):
	// components
	e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s\|\|{},t=>
	render(Object.assign(e.s,t)&&e,d,e)),t.i\|\|d,t&&t.i\|\|{}),d.t=t=e):(
	// create notes
	m=t.d\|\|(e.t?document.createElement(e.t):new Text(e.p)),
	// diff props

	if (typeof WeakMap !== 'function') {
	let c = 0;
	WeakMap = function() {
	let id = typeof Symbol === 'function' ? Symbol() : `__weak$${++c}`;
	this.set = (key, val) => { key[id] = val };
	this.get = key => key[id];
	};
	}