Lalit Kapoor lalitkapoor

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.

Effective Engineer - Notes

By Edmond Lau
Highly Recommended 👍
http://www.theeffectiveengineer.com/

What's an Effective Engineer?

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;

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

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

TLDR: a React component should either manage its own state, or expose a callback so that its parent can. But never both.

Sometimes our first impulse is for a component to entirely manage its own state. Consider this simple theater seating picker that has a letter for a row, and a number for a seat. Clicking the buttons to increment each value is hardly the height of user-interface design, but never mind - that's how it works:

/* @flow */
var React = require('react');

var Letter: React.ReactClass = React.createClass({
  getInitialState: function(): any {

	# If you use bash, this technique isn't really zsh specific. Adapt as needed.
	source ~/keychain-environment-variables.sh

	# AWS configuration example, after doing:
	# $ set-keychain-environment-variable AWS_ACCESS_KEY_ID
	# provide: "AKIAYOURACCESSKEY"
	# $ set-keychain-environment-variable AWS_SECRET_ACCESS_KEY
	# provide: "j1/yoursupersecret/password"
	export AWS_ACCESS_KEY_ID=$(keychain-environment-variable AWS_ACCESS_KEY_ID);
	export AWS_SECRET_ACCESS_KEY=$(keychain-environment-variable AWS_SECRET_ACCESS_KEY);

	import AppKit

	class PreferencesViewController: NSTabViewController {

	private lazy var tabViewSizes: [NSTabViewItem: NSSize] = [:]

	override func tabView(_ tabView: NSTabView, didSelect tabViewItem: NSTabViewItem?) {
	super.tabView(tabView, didSelect: tabViewItem)

	if let tabViewItem = tabViewItem {

	{
	"AWSEBDockerrunVersion": "1",
	"Image": {
	"Name": "<AWS_ACCOUNT_ID>.dkr.ecr.us-east-1.amazonaws.com/<NAME>:<TAG>",
	"Update": "true"
	},
	"Ports": [
	{
	"ContainerPort": "443"
	}

	# List users by average and maximum session length.
	SELECT person, max(client.runtime_ms), avg(client.runtime_ms)
	FROM item_occurrence
	GROUP BY 1
	ORDER BY 2 DESC

	# List active date ranges for each deploy.
	SELECT client.javascript.code_version, min(timestamp), max(timestamp)
	FROM item_occurrence
	GROUP BY 1