Today’s plan is to finish up some functional additions to the shopping list tracker and write a review post of the past ten days.

Functional Additions to React App

Day 10 Code

Edit Ergonomics

When editing a text input field, there should be a placeolder for hte current value, which can be auto-filled for editing by pressing tab. Otherwise, the user inputs a complete new value.

    function tryAutofill(e) {
        if (e.target.value === "" && e.keyCode === 9) {
            e.preventDefault();
            const text =
                e.target.placeholder.split(" (press")[0]
            e.target.value = text;
            setNewName(e.target.placeholder);
        }
    }

Status Toggle

Instead of completed boolean task status, each item in the shopping list should be associated with a status name (string, logically of union type though not implemented as such here):

    // checkbox
    function toggleTaskStatus(id, statusName) {
        const updatedTasks = tasks.map(task => {
            if (task.id !== id) {
                return task;
            } else {
                return {...task, statusName: statusName};
            }
        });
        setTasks(updatedTasks);
        }

Cosmetic Updates

After some minor cosmetic updates to reduce unnecessary text, the app looks like this:

Todo App

I started to add a URL input component, then spent a long time unsuccessfully trying to understand how the CSS width and element positioning works in the index.css stylesheet. It seems silly to get stuck on the “simple” presentation layer, but I concluded that without a deeper undertanding of modern CSS, the point of dimishing return was reached as far as experimenting blindly with the obvious elements like width, max-width, display, etc.

While I’m adding a CSS primer to my future todo list, it also really emphasized to me just how nice the Elm UI library elm-ui is, in terms of abstracting away the HTML layout and CSS layers, and presenting the user a pure Elm API that is intuitive and “just works” (for the most part).

Wrapping Up

While I feel like I learned a decent amount from the React tutorail and toy app, especially in terms of IO like localStorage and keyboard interactions, I still feel quite frustrated with the sluggish pace of developemnt and debugging.

To become more proficient on the front-end, it seems like a few things are imperative:

  • reasonable proficiency in CSS
  • solid understanding of the framework tooling, especially for testing, error handling, and generally getting helpful messages out of the compiler

This concludes my ten day journey learning JavaScript… a review post to follow.

Todo / To Read

  • Using flycheck with React / web-mode / .jsx in emacs
  • MDN accessibility: ARIA
  • Figure out how to use outDir(?) to compile .js files to separate subdirectory
  • Compiling with both TypeScript with Babel
  • Kyle Simpson, You Don’t Know JS
  • Composing Software, by Eric Elliott (https:// leanpub.com/composingsoftware)
  • A CSS primer