JavaScript in 10 Days: Day 10
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
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:
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