Helge Drews dahelg

Setup Next.js 13 project with Eslint + Prettier

Create a fresh new Next js project. https://nextjs.org/docs/getting-started#automatic-setup
```
pnpm create next-app --typescript 
```
install prettier

Chat GPT "DAN" (and other "Jailbreaks")

Remix Deferred

Remix Deferred is currently implemented on top of React's Suspense model but is not limited to React. This will be a quick dive into how "promise over the wire" is accomplished.

SSR + Hydration

It isn't rocket science, but a quick recap of how frameworks such as react do SSR:

Load data
Render the app

Conventional Commit Messages

See how a minor change to your commit message style can make a difference.

git commit -m"<type>(<optional scope>): <description>" \
  -m"<optional body>" \
  -m"<optional footer>"

webPack-VSCode-Jest-alias-configuration

This are the necessary steps about How to configure alias in WebPack, VSCode and Jest.

Problem: We want to avoid the type of imports where you have to 'calculate' the path, intead of that we want to use a more friendly alias.

	<dialog open>
	<form method="dialog">
	<p>Do you want to confirm your action?</p>
	<div class="right">
	<input class="btn" type="submit" value="Ok" />
	<input class ="btn" type="submit" value="Cancel" />
	</div>
	</form>
	</dialog>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<meta content="ie=edge" http-equiv="X-UA-Compatible">
	<title>Lorem Ipsum Generator</title>
	</head>

	import * as React from "react"
	import { useState, useEffect } from "react"

	// Hook
	let cachedScripts = []

	export function useScript(src) {
	// Keeping track of script loaded and error state
	const [state, setState] = useState({
	loaded: false,

	// EmailInput wraps an HTML `input` and adds some app-specific styling.
	const EmailInput = React.forwardRef((props, ref) => (
	<input ref={ref} {...props} type="email" className="AppEmailInput" />
	));

	class App extends Component {
	emailRef = React.createRef();

	render() {
	return (

	# Project Title

	A nice project with a nice description

	---
	## Requirements

	For development, you will only need Node.js and a node global package, Yarn, installed in your environement.

	### Node