Articles tagged with Frontend

From the reddit thread a ReactJS lover discovers Svelte and sends everything to trash:

You don’t realize how overbuilt react is until you use svelte. And then you can never unsee it and you are ruined.

Don’t Use Create react app (CRA)

From this GitHub snippet:

async function OpenAITextStream(search: string) {
	const payload: OpenAITextPayload = {
		model: 'text-davinci-003',
		prompt: search,
		temperature: 0,
		max_tokens: 2048,
		frequency_penalty: 0.0,
		stream: true,
		presence_penalty: 0.0,
		n: 1
	};

	const encoder = new TextEncoder();
	const decoder = new TextDecoder();

	let counter = 0;

	const res = await fetch('https://api.openai.com/v1/completions', {
		headers: {
			'Content-Type': 'application/json',
			Authorization: `Bearer ${key}`
		},
		method: 'POST',
		body: JSON.stringify(payload)
	});

	const stream = new ReadableStream({
		async start(controller) {
			// eslint-disable-next-line @typescript-eslint/no-explicit-any
			function onParse(event: ParseEvent) {
				if (event.type === 'event') {
					const data = event.data;
					// https://beta.openai.com/docs/api-reference/completions/create#completions/create-stream
					if (data === '[DONE]') {
						controller.close();
						return;
					}
					try {
						const json = JSON.parse(data);
						const text = json.choices[0].text;

						if (counter < 2 && (text.match(/\n/) || []).length) {
							// this is a prefix character (i.e., "\n\n"), do nothing
							return;
						}
						const queue = encoder.encode(text);
						controller.enqueue(queue);
						counter++;
					} catch (e) {
						controller.error(e);
					}
				}
			}

			// stream response (SSE) from OpenAI may be fragmented into multiple chunks
			// this ensures we properly read chunks and invoke an event for each SSE event stream
			const parser = createParser(onParse);
			// https://web.dev/streams/#asynchronous-iteration
			// eslint-disable-next-line @typescript-eslint/no-explicit-any
			for await (const chunk of res.body as any) {
				parser.feed(decoder.decode(chunk));
			}
		}
	});
	return stream;
}

As Theo once wrote on Twitter:

Create react app needs to be archived for the greater good of web dev

Update as of 2023-03-17: I’m extremely happy that Create React App is dead.

Quasar will not feature Svelte. See this GitHub thread:

Svelte doesn’t offer anything significant in return. On the contrary, having to write only html templates instead of using render functions is VERY limiting. Even if we would want to port Quasar to Svelte, we’d have to drop a lot of features. You might say Svelte renders faster, but Vue 3 comes very close in render speed, even surpassing Svelte in many scenarios. Then my final argument would be the resources needed to do this. We are already maintaining the most feature-rich UI library with top-notch support for a LOT of environments (desktop browsers, mobile browsers — android, iOS, cordova, capacitor, …), a CLI with lots of build modes, starter kits, documentation app, App Extensions. There’s not enough companies donating that would allow us to start yet another big big project like a port to Svelte. Our current focus is to add even more components and directives and port Quasar to Vue 3 rather than expanding to Svelte.

Unfortunate, but understandable. I love how simple Svelte is, but Quasar still remains my favorite framework for building things quickly. See You should Use Quasar Framework.

This is my favorite roadmap for choosing your Javascript framework in 2023. Theo walks you through each of the decisions you need to make when making decisions on which framework to choose for your software engineering projects.

JavaScript Frameworks in 2023 - YouTube