Mike Kruk tamagokun

How we incorporate next and cloudfront (2018-04-21)

Feel free to contact me at [email protected] or tweet at me @statisticsftw

This is a rough outline of how we utilize next.js and S3/Cloudfront. Hope it helps!

It assumes some knowledge of AWS.

Goals

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };

Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.

My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important). During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.

Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;

Idiomatic React Testing Patterns

Testing React components seems simple at first. Then you need to test something that isn't a pure interaction and things seem to break down. These 4 patterns should help you write readable, flexible tests for the type of component you are testing.

Setup

I recommend doing all setup in the most functional way possible. If you can avoid it, don't set variables in a beforeEach. This will help ensure tests are isolated and make things a bit easier to reason about. I use a pattern that gives great defaults for each test example but allows every example to override props when needed:

Notes

This code handles any JS runtime error during rendering React components. Without this handling, once an error occurs, whole component tree is damaged and can't be used at all. With this handling, nothing will be rendered in production environment (error span in dev env.) + in production the error is logged to Sentry (if you are not using it just delete related code)
This is basicaly a workaround for proposed feature in React core - described in Issue: facebook/react#2461
Works for all variants of Component creation - React.createClass, extending React.Component and also stateless functional components.
To get this work, just put this snippet into your entry js file. Then it will work in whole application.
Also supporting React Hot Reload!
If you find this useful, please retweet https://twitter.com/Aldredcz/status/744650159942995968 :)

Ideas

specify custom error renderer (global / per component, e.g. by implementing method renderOnError() in a comp

Distilling the Essence of Reducers

Redux has brought the notion of reducer back into the awareness of many developers for whom they are a novel concept. In fact they are quite simple, and used all the time in such things as SUM aggregations in databases, where they compute a single value from many.

It's great that Redux has made reducers known to a broader audience, though they are relatively ancient concepts in programming, in fact. But the particular way Redux illustrates a reducer in its documentaion is, in my opinion, with a coding style that is harder to extend and read than it should be. Let's distill reducers down to their essensce, and build up Redux reducers in a way that lowers complexity, and helps separate Redux idioms from your business logic.

The simplest reducer

A reducer is a pure function that accepts more arguments than it returns. That is to say - one whose "arity" is greater than 1. It 'reduces' the two things you pass it down to a single value. Here are two reducers, in a map

	#elC - The elementary OS Combobulator - There are many issues within the community that tend to come up a lot.
	#I know many of them are open bug reports, but until they are patched we can provide a consolidated list of work-arounds.
	#I think this will be helpful for newcomers and veterans alike

	#enable ppas
	sudo apt install -y software-properties-common python3-software-properties python-software-properties

	#install elementary tweaks
	sudo add-apt-repository -y ppa:philip.scott/elementary-tweaks
	sudo apt update -y

	FROM alpine:3.3
	MAINTAINER Tom Maiaroto <[email protected]>

	# Install packages
	RUN apk --update --repository http://dl-3.alpinelinux.org/alpine/edge/main add \
	freetype-dev \
	libjpeg-turbo-dev \
	libpng-dev \
	libwebp-dev \
	php7 \

	sudo /bin/dd if=/dev/zero of=/var/swap.1 bs=1M count=1024
	sudo /sbin/mkswap /var/swap.1
	sudo /sbin/swapon /var/swap.1
	sudo chmod 600 /var/swap.1

	# Add to /etc/fstab
	/var/swap.1 swap swap defaults 0 0

	alias accio=wget
	alias avadaKedavra='rm -f'
	alias imperio=sudo
	alias priorIncantato='echo `history \|tail -n2 \|head -n1` \| sed "s/[0-9]* //"'
	alias stupefy='sleep 5'
	alias wingardiumLeviosa=mv

	alias sonorus='set -v'
	alias quietus='set +v'