Klaus klauskohut

learn how to bundle backend using webpack in a single bundle (check this https://gist.github.com/jgcmarins/2860f547f5d785dce24ca0eadbe3abdd)
learn how to automate lamdba deploys using serveless or aws cdk (github actions)
learn how to configure and automate api gateway
learn how to automate tests lambdas using jest
learn how to configure, automate and use RDS Proxy to fast database workflow in lamdbas (also cache database connections)
how the performance gain using RDS Proxy over normal database usage
learn about cold start and lambda statefull (https://www.swyx.io/stateful-serverless/)
expose a CRUD api in lamdba
put everything on open source (github)
write a blog post about each of the topics above

Monolithic Components, Composable Components

Introduction

Building reusable UI components is a non trivial task, as we need to anticipate a number of things when planing for reuseability. On the one end of the spectrum we want to enable customization and on the other side we want to avoid developers doing the wrong thing, like breaking the component or displaying invalid states.

To get a better understanding of what we need to think about and consider upfront, we will build a non-trivial UI component, that displays tags. Our Tags component will take care of managing and displaying tags.

The following examples are all built with Tachyons and React, but these ideas apply to any UI component and any general styling approach.

This is an auth example (WIP)

react + redux + RR

It uses https://gist.github.com/iNikNik/3c1b870f63dc0de67c38 for stores and actions.

1) create redux

const redux = createRedux(state);

2) get requireAccess func => bindCheckAuth to redux

	// One of my new favorite React Hook patternms is to create handler
	// functions for a custom hook using `React.useMemo` instead of
	// `React.useCallback`, like so:

	function useBool(initialState = false) {
	const [state, setState] = React.useState(initialState)

	// Instead of individual React.useCallbacks gathered into an object
	// Let's memoize the whole object. Then, we can destructure the
	// methods we need in our consuming component.

	import { useEffect } from 'react'
	import hotkeys from 'hotkeys-js'

	export const useHotkeys = (key: string, cb: () => any, inputs?: any[]) => {
	useEffect(() => {
	hotkeys(key, cb)
	return () => hotkeys.unbind(key)
	}, inputs)
	}

	function isLight(hex) {
	let vals = hex.substring(1).split('').map((h, i) => {
	if (!/^\d+$/.test(h)) {
	h = parseInt(h, 16)
	}
	return parseInt(i % 2 < 1 ? h * 16 : h)
	})
	return vals.reduce((n, x) => n + x) > (765 / 2)
	}

	{
	"emojis": [
	{"emoji": "👩‍👩‍👧‍👧", "name": "family: woman, woman, girl, girl", "shortname": ":woman_woman_girl_girl:", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F467", "html": "👩&zwj;👩&zwj;👧&zwj;👧", "category": "People & Body (family)", "order": ""},
	{"emoji": "👩‍👩‍👧‍👦", "name": "family: woman, woman, girl, boy", "shortname": ":woman_woman_girl_boy:", "unicode": "1F469 200D 1F469 200D 1F467 200D 1F466", "html": "👩&zwj;👩&zwj;👧&zwj;👦", "category": "People & Body (family)", "order": ""},
	{"emoji": "👩‍👩‍👦‍👦", "name": "family: woman, woman, boy, boy", "shortname": ":woman_woman_boy_boy:", "unicode": "1F469 200D 1F469 200D 1F466 200D 1F466", "html": "👩&zwj;👩&zwj;👦&zwj;👦", "category": "People & Body (family)", "order": ""},
	{"emoji": "👨‍👩‍👧‍👧", "name": "family: man, woman, girl, girl", "shortname": ":man_woman_girl_girl:", "unicode": "1F468 200D 1F469 200D 1F467 200D 1F467", "html": "👨&zwj;👩&z

	var webpack = require('webpack');
	var MemoryFS = require('memory-fs');
	var SingleEntryDependency = require('webpack/lib/dependencies/SingleEntryDependency');
	var fs = new MemoryFS();

	fs.mkdirpSync('/src');
	fs.writeFileSync('/src/app.js', 'require("./dep.js")', 'utf-8');
	fs.writeFileSync('/src/dep.js', 'module.exports = function(msg){console.log(msg)}', 'utf-8');
	fs.writeFileSync('/src/extra-entry.js', 'require("./dep.js")', 'utf-8');

	# AppDelegate.m

	#import <Analytics/SEGAnalytics.h>
	[SEGAnalytics setupWithConfiguration:[SEGAnalyticsConfiguration configurationWithWriteKey:@"YOUR_ANALYTICS_KEY_HERE"]];


	# AnalyticsHelper.h

	#import "RCTViewManager.h"
	#import "RCTBridgeModule.h"

	const I = x => x
	const K = x => y => x
	const A = f => x => f (x)
	const T = x => f => f (x)
	const W = f => x => f (x) (x)
	const C = f => y => x => f (x) (y)
	const B = f => g => x => f (g (x))
	const S = f => g => x => f (x) (g (x))
	const S_ = f => g => x => f (g (x)) (x)
	const S2 = f => g => h => x => f (g (x)) (h (x))