KATAs for Learning Web

I'm going to make a series of web exercises which you can return to as often as you'd like to build mastery. Each one could be done many times with various focuses, a first time to just make some progress, another time to explore a different framework, or another time to observe common error states and explore design patterns for solving them.

I imagine sending students wanting to level up to this page for self-study.

A kata is a martial arts movement pattern which you can practice repeatedly making small tweaks to and learning motions that can later be applied in practice.

Each Kata has a few components:

• Skills the basic areas of knowledge required for this exercise
• Variants ways to expand or stretch the kata when you return
• Traps common ways simple solutions might go wrong

Kata 1: A user clicks a button and sees something happen.

Skills: Event listeners, CSS Selectors, DOM manipulation

Variants: make a click counter; try other event types; dynamically make more buttons; create a game from your buttons; do this with some frameworks/library and compare (jquery, react, vue, angular, etc.)

Traps: zombie event listeners, event bubbling

Kata 2: A user provides input which changes their experience

Skills: input field (value), different event listeners, so many input types

Variants: greet someone by their name; show their favorite color; play a guessing game with them; bind the data to/from a variable/object; make a choose your own adventure game

Traps: timing of change/keyup events when firing a slow process (e.g. API fetch), knowing which input maps to which variables

Kata 3: Load internet data into a widget on a page

Skills: use a public API, AJAX requests, templating

Variants: load live stock prices, use location services to get weather in your area, subscribe to a blog RSS feed, try it with websockets

Traps: long-polling vs pushes for live data, header values for certain services, CORS will waste your time one day

Kata 4: Save some data to a database

Skills: wiring up a database, making an API, database design

Variants: Make a REST API; Try Node/PHP/Flask; Try SQLite3/MySQL/MongoDB; Try Firebase; Try an AWS DB (RDS/DynamoDB); Try GraphQL;

Traps: so many that this is a class but: indexing for performance, read/write ratios, to normalize or not, structuring a DB can be subtle