Maurício Mutte mauriciomutte

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Articles to learn cursor

1# Understanding pagination: REST, GraphQL and Relay

2# graphql pagination

3# GraphQL Cursor Connections Specification

4# Explaining GraphQL Connections

Here is the best setup (I think so :D) for K-series Keychron keyboards on Linux.

Note: many newer Keychron keyboards use QMK as firmware and most tips here do not apply to them. Maybe the ones related to Bluetooth can be useful, but everything related to Apple's keyboard module (hid_apple) on Linux, won't work. As far as I know, all QMK-based boards use the hid_generic module instead. Examples of QMK-based boards are: Q, Q-Pro, V, K-Pro, etc.

Most of these commands have been tested on Ubuntu 20.04 and should also work on most Debian-based distributions. If a command happens not to work for you, take a look in the comment section.

Make Fn + F-keys work (NOT FOR QMK-BASED BOARDS)

Older Keychron keyboards (those not based on QMK) use the hid_apple driver on Linux, even in the Windows/Android mode, both in Bluetooth and Wired modes.

tips to evolve as a developer

developers get stuck, paralized

https://nav.al/finding-time

https://www.oreilly.com/library/view/apprenticeship-patterns/9780596806842/ch04.html

Make It Stick https://www.amazon.com.br/Make-Stick-Science-Successful-Learning/dp/0674729013

	import { ReactElement } from 'react';
	import { ThemeProvider } from 'styled-components';
	import { render, RenderOptions } from '@testing-library/react';

	import theme from 'styles/theme';

	type CustomRenderProps = Omit<RenderOptions, 'queries'>;

	const customRender = (ui: ReactElement, options: CustomRenderProps = {}) =>
	render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>, options);