Olga Dmitricenko odGit

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.

NOTE, April 18, 2020: I wrote this document in February 2019 when I was actively investigating Electron. I haven't used it since then and have largely forgotten what this was for or how electron-webpack works. I vaguely remember the problem, but that's it. It would appear based on the comments below that this document is still coming up in web searches but has become out of date and parts of it don't work. If anyone has specific fixes to my instructions, please leave them in the comments and I'll happily incorporate them.

Using electron-webpack without Node integration

Overview

The current version (as of 2019-02-02) of electron-webpack is set up with the assumption that your BrowserWindow instance has nodeIntegration: true. However, Electron is encouraging users to set nodeIntegration: false as a security precaution, and in the future BrowserWindows will have this setting set to false by default. Doing so now with electron-webpack throws an error because the index.html template has commonjs re

iTerm2

Install iTerm 2

Download and install iTerm2 (it has better color fidelity than the built in Terminal).

Install color scheme

Get the iTerm color settings:

Pimping Up Your PowerShell & Cmder with Posh-Git, Oh-My-Posh, & Powerline Fonts

Backstory (TLDR)

I work as a full-stack developer at work. We are a Windows & Azure shop, so we are using Windows as our development platform, hence this customization.

For my console needs, I am using Cmder which is based on ConEmu with PowerShell as my shell of choice.

Yes, yes, I know nowadays you can use the Linux subsystem on Windows 10 which allow you to run Ubuntu on Windows. If you are looking for customization of the Ubuntu bash shell, check out this article by Scott Hanselman.

What's this?

Instructions to obtain ZSH on a windows environment, without the input funny business presented by some other attempted solutions.

The final result is ZSH running on a mintty terminal, emulated by cygwin, and being handled by the popular cmder.

Why is this here?

For the benefit of myself and others. I've already followed these instructions twice. It took me hours to figure all this out, maybe someone else can save a few.

What exactly is covered?

Installing and setting up cmder

git checkout master # you can avoid this line if you are in master...
git subtree split --prefix dist -b gh-pages # create a local gh-pages branch containing the splitted output folder
git push -f origin gh-pages:gh-pages # force the push of the gh-pages branch to the remote gh-pages branch at origin
git branch -D gh-pages # delete the local gh-pages because you will need it: ref

	export default {
	install: Vue => Vue.filter('format-number', (value, { thousand = ' ', decimal = '.', decimals = null, maxDecimals = decimals, minDecimals = decimals, normalize = true, roundToEven = true } = {}) => {
	value = normalize ? normalizeNumber(value) : `${value != null ? value : ''}`;
	let pieces = value.split('.');
	if (!pieces[0].length) {
	return;
	}

	if (minDecimals > 0) {
	pieces[1] = (pieces[1] = pieces[1] \|\| '').padEnd(minDecimals, '0');

	// create context with no upfront defaultValue
	// without having to do undefined check all the time
	function createCtx<A>() {
	const ctx = React.createContext<A \| undefined>(undefined)
	function useCtx() {
	const c = React.useContext(ctx)
	if (!c) throw new Error("useCtx must be inside a Provider with a value")
	return c
	}
	return [useCtx, ctx.Provider] as const

	if ( process.env.NODE_ENV === 'production' ) {
	// dev runs with babel-node so this isn't necessary
	require('babel-core/register'); // this includes the polyfill
	require('newrelic');
	}

	import 'source-map-support/register'

	import Debug from 'debug'
	import express from 'express'

	// ------------
	// counterStore.js
	// ------------

	import {
	INCREMENT_COUNTER,
	DECREMENT_COUNTER
	} from '../constants/ActionTypes';

	const initialState = { counter: 0 };