If you spend any time working with JavaScript, one of the building blocks you are going to need (the learning Lego blocks) is being deeply comfortable selecting HTML elements by tag name, class name, id, along with other properties like children and the rest.
Like learning to select items from nested data structures (NDSs), such as arrays of arrays, arrays of hashes, etc… this is a skill that is best solidified with practice. But, unlike drilling down into NDSs in Ruby, which we have done for 2+ months now, we are all relatively new to grabbing items from the DOM using CSS selectors. I have spent my fair share of time trying to just get a hold of an element to modify with JavaScript, let alone do the work to update it. Slow going, indeed. Sometimes it makes you just want to stop before it starts.
If we want to work on a professional level, CSS selectors have to be to us like water is to a fish. So, what’s the plan? Just do the work over and over until we slowly get better? No! (Well, yes, that’s how learning generally works, but maybe we could CONDENSE our practice and make the process faster.)
Building on my previous post that focused on the “meta” aspects of learning, I want to point to a tool that I have played with and really enjoyed: The CSS Diner
In this free web app developed by Github user flukeout, you select particular items (all of a food/diner theme) using CSS selectors. These selections start in the easy range (select an item by its HTML tag) and progress rapidly to more complex topics (like selecting the second direct child of an item with a particular class).
With its immediate visual feedback, gamelike quality, and the help text to the right (and solutions available if needed), this is currently my favorite drilling tool between labs. I think you all will like it, too. Even after the “game” is over, you may want to think of it like interactive flash cards for periodic review. I know I will; and the concept will stick with me long after I stop visiting the CSS Diner.
What’s next? Another skill that is crucial to work with data and other applications is being able to interact with APIs and databases. If anyone knows of a similar, visual/game-based practice tool for drilling these sub-skills, please let me know. Otherwise, maybe we will just have to make them ourselves!
