vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

vasanthk

Agile Contract Guide

This document is a guide to writing agile contracts. Unlike traditional contracts, an agile contract does not specify individual tasks to be completed by the Contractor. Rather, an agile contract specifies how the Client and Contractor interact, and how the Contractor is paid. The Deliverable Work performed for the contract is determined through an ongoing collaboration between the Client and the Contractor.

Agile contracts require a great deal of trust from both the Client and the Contractor. This trust is fostered through tight feedback cycles and well-defined responsibilities that both parties can expect from each other. More so than traditional contracts, an agile contract requires active participation from the Client.

vasanthk

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

vasanthk

7 critical traits for a normal programmer

EARLY DRAFT FOR NEXT EPISODE, PLEASE PROVIDE FEEDBACK

This week I tweeted and tooted this question:

”What do you think are critical traits in a programmer? NOT to be super 10x or anything - just to feel good and function well professionally.”

Link to full threads here: [https://twitter.com/mpjme/status/855691565460848640]

vasanthk

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.

vasanthk

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' };

vasanthk

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

vasanthk

AutoBinding in React

Just for quicker reference from here

1. ES5 (No class)

var Button = React.createClass({
  handler:function(e){
   ....
  },

vasanthk

A lot of people mentioned other immutable JS libraries after reading my post. I thought it would be good to make a list of available ones.

There are two types of immutable libraries: simple helpers for copying JavaScript objects, and actual persistent data structure implementations. My post generally analyzed the tradeoffs between both kinds of libraries and everything applies to the below libraries in either category.

Libraries are sorted by github popularity.

Persistent Data Structures w/structural sharing

vasanthk

/*
* A child is running up a staircase with n steps, and can hop either 1 step, 2 steps,
* or 3 steps at a time. Implement a method to count how many possible ways the
* child can run up the stairs.
*/
var countSteps = (function () {

  var memo = [0,1];

  var fn = function (numStairs) {