Rodrigo Schneider RSchneider94

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.

VSCode - ESLint, Prettier & Airbnb Setup

1. Install ESLint & Prettier extensions for VSCode

Optional - Set format on save and any global prettier options

2. Install Packages

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

For MacOS Catalina, visit Install mysql2 on MacOS Catalina

Problem

Installing mysql2 gem errors on MacOS Mojave.

Solution

Make sure openssl is installed on Mac via Homebrew.

Example code from the video "Use async/await with TypeScript in Cloud Functions"

This is the example code from my video about using async/await with Cloud Functions. I've placed it here in a gist so it's easier to compare the "before" and "after" states for each case.

The code in this project is licensed under the Apache License 2.0.

Copyright 2018 Google LLC

Improved .sr-only

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.

	# How to consume Github Package private registry with yarn?

	Create an .npmrc file in the same location as the package.json with this content.

	```
	registry=https://registry.yarnpkg.com/

	@<username>:registry=https://npm.pkg.github.com
	//npm.pkg.github.com/:_authToken=<your auth token>
	always-auth=true

	/* Shadow 0dp */
	box-shadow: none;

	/* Shadow 1dp */
	box-shadow: 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);

	/* Shadow 2dp */
	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);

	/* Shadow 3dp */

	import React from 'react';

	const ConditionalWrap = ({condition, wrap, children}) => condition ? wrap(children) : children;

	const Header = ({shouldLinkToHome}) => (
	<div>
	<ConditionalWrap
	condition={shouldLinkToHome}
	wrap={children => <a href="/">{children}</a>}
	>

	axios({
	url: 'http://localhost:5000/static/example.pdf',
	method: 'GET',
	responseType: 'blob', // important
	}).then((response) => {
	const url = window.URL.createObjectURL(new Blob([response.data]));
	const link = document.createElement('a');
	link.href = url;
	link.setAttribute('download', 'file.pdf');
	document.body.appendChild(link);

	'use strict';

	/**
	* Makes an element draggable.
	*
	* @param {HTMLElement} element - The element.
	*/
	function draggable(element) {
	var isMouseDown = false;