busypeoples

Notes on Building a Modern Typing Training App: Code Based Training

Introduction

For the last couple of weeks I have been iterating over a typing training app that should feel more modern and help with becoming a better typist. The initial idea was more of an experiment, while I had a couple of days of focus time, to see how such an app could work and feel like. Using it for a couple of months helped to carve out a more specific idea what this training app should and should not do.

You can read about the initial implementation here. The write-up explains the technical setup and reasoning behind the initial prototype. One idea is to make the training useful by using spaced repetition as a learning technique, you can read more about the approach here. The other aspect is to enable to train with actual code examples.

The code part seems trivial a

busypeoples

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.

busypeoples

// TypeScript Fundamentals For JavaScript Developers

/*
  Tutorial for JavaScript Developers wanting to get started with TypeScript.
  Thorough walkthrough of all the basic features.
  We will go through the basic features to gain a better understanding of the fundamentals.
  You can uncomment the features one by one and work through this tutorial.
  If you have any questions or feedback please connect via Twitter:
  A. Sharif : https://twitter.com/sharifsbeat
*/

busypeoples

Making Impossible States Impossible in ReasonML

Introduction

If you have already seen Richard Feldman's talk entitled "Making Impossible States Impossible" or have read "Designing with types: Making illegal states unrepresentable" then you can skip the explanations and just head straight to the Reason examples.

This post is intended to display how to model your Reason Application to prevent creating impossible states. The benefits of being able to design a feature in this way include avoiding having to deal with complex test scenarios regarding defined business rules and a clear documentation of what is possible just by looking at the type definition. Long story short, let's see how this all works by implementing an example.

Requirements

busypeoples

import React, { useState } from "react";

type NotAsked = {
  _type: "NOT_ASKED";
};

type Loading = {
  _type: "LOADING";
};

busypeoples

import React from 'react'
import { render } from 'react-dom'
import { compose, map, prop, curry, reduce, pipe } from 'ramda'

const combine = curry((c, o) => x => (<div>{c(x)} {o(x)}</div>))
const combineComponents = (...args) => {
  const [first, ...rest] = args
  return reduce((acc, c) => combine(acc, c), first, rest)
}

busypeoples

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, combineReducers } from 'redux'
import * as R from 'ramda'

// composition helper
const combine = R.curry((c, o) => x => (<div>{c(x)} {o(x)}</div>))
const combineComponents = (...args) => {
  const [first, ...rest] = args
  return R.reduce((acc, c) => combine(acc, c), first, rest)

busypeoples

/**
 * TS Helper Functions
 */
type ConvertTo<Type, From, To> = {
  [Key in keyof Type]: Required<Type>[Key] extends From ? To : Type[Key];
};

type FilterByType<T, U> = {
  [Key in keyof Required<T>]: Required<T>[Key] extends U ? Key : never;
}[keyof T];

busypeoples

type field =
  | O
  | X

type position = (field, field, field, field)

type box = (position, position, position, position)

type units = list<box>

busypeoples

useInView Preact Hook

Can be used as a starting point for implementing your own specific check to see if an element is in view.

const YourViewComponent = () => {
  const { isInView, inViewRef } = useInView();

 return (