Jason Miller developit

Lighthouse Viewer

A Preact PWA port of Eric Bidelman's Lighthouse Viewer app. Zero-config PWA build powered by preact-cli.

Preact for Angular 1 Users

Here's my quick attempt to build a tiny preact app using terminology from Angular 1.

Installation

# get it
git clone https://gist.github.com/e5de4c33c1a8d8fd172905010d3ff75c.git preact-for-angular1-users
cd preact-for-angular1-users

Note: I'm not involved in Prepack in any way — please correct me if I say anything incorrect below!

A few people have asked me if Prepack and Svelte are similar projects with similar goals. The answer is 'no, they're not', but let's take a moment to explore why.

What is Prepack?

Prepack describes itself as a 'partial evaluator for JavaScript'. What that means is that it will run your code in a specialised interpreter that, rather than having some effect on the world (like printing a message to the console), will track the effects that would have happened and express them more directly.

So for example if you give it this code...

	Simple implementation	Statically Analyzable	Convenient
`<div ref="foo">`	No	No	Yes
`<div ref={foo => this.foo = foo}>`	Yes	Yes	No†
`<div ref={linkRef(this, 'foo')>`	Yes	No	Yes

† Is it really that inconvenient?

Mastodon frontend perf suggestions

I took some time this weekend to analyze Mastodon's frontend performance. I didn't manage to write many fixes (just a config fix and better caching for static assets) so this was mostly just investigation.

The point of this document is to lay out some of my initial thoughts, since it may be helpful for others. There's a lot of technical jargon, so you may want to get some background by looking at my blog post on "The cost of small modules" and my talk on "Solving the web performance crisis" (slides).

Tootstorms

cursory investigation

	{
	"rewrites": [
	{
	"source": "**",
	"destination": "/index.html"
	}
	],
	"headers": [
	{
	"source": "**",

	const typeOf = ob => ob.toString()

	const forEach = (fn, l) => typeOf(l) === '[object Object]'
	? forEach(k => fn(l[k], k), Object.keys(l))
	: Array.from(l).forEach(fn)

	export const patch = (elm, node) => {
	if(elm === node) return elm
	if(typeOf(elm) === '[object Text]') {
	elm.textContent = node.textContent

	<script src="/path/to/embed.umd.js"></script>

	<div id="foo"></div>
	<script>
	var parent = document.getElementById('foo')
	embed.renderWidget(
	'foo', // widget name
	{ a: 'b' }, // props
	parent // render into this
	);

	// UPDATE: In 2023, you should probably stop using this! The narrow version of Safari that
	// does not support `nomodule` is probably not being used anywhere. The code below is left
	// for posterity.

	/**
	* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
	* load <script nomodule> anyway. This snippet solve this problem, but only for script
	* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
	*
	* Again: this will not prevent inline script, e.g.:

	import { Component } from 'preact';

	export default class PureComponent extends Component {
	shouldComponentUpdate(props, state) {
	return !(shallowEqual(props, this.props) && shallowEqual(state, this.state));
	}
	}

	function shallowEqual(a, b) {
	for (let key in a) if (a[key]!==b[key]) return false;