Tutorials for "Just-In-Time" Learning and Application

#codenewbie #beginners

Like many bootcamp grads, I've recently had to navigate the transition from a very rigorous, structured and supportive learning environment to a completely self-directed learning environment with virtually unlimited resources, yet very little direction other than my own personal learning whims.

The Problem: Tutorial Hell

Without careful planning at this stage, it is easy to fall into that "Tutorial Hell" that is often discussed in blog posts here on DEV and elsewhere: The continuous process of consuming video (or written) tutorials, following directions step-by-step...and then getting stumped when trying to create something creative on our own.

From my perspective, this problem arises for a number of reasons, perhaps including:

A desire to explore as many languages and frameworks as possible...because, why not?
A sense of accomplishment for completing many small projects
A mindset that learning more content makes us better programmers
A belief that collecting certificates makes us more employable in a tough job market
And of course, completing tutorials gives us a strong feeling of success as we battle the notorious Imposter Syndrome

The Solution: "Just-In-Time" Tutorials for Learning and Application

While there are many reasons we cling to tutorials, they do not automatically translate to increasing our programming skills or job readiness. Below, I'll describe my recipe for using tutorials in a very specific way, that builds on what we already know, helps us to meet our stretch goals, and results in lasting knowledge.

Step 1: Build on What You Already Know...(and literally, start building!)

The Learning Sciences have been telling us for years that we are not blank slates. As we live and learn, we are in a continuous process of taking in new information and skills and making sense of them in terms of what we already know and can do. This works best when we can make concrete connections between the old and new information, and is less effective when we are unable to make those clear connections.

Since tutorials are generally created for a mass audience and are not personalized, we can't rely on the instructor or content-creator to make those personal connections for us. In order to effectively integrate the new information into our mental schema, we can leverage project-based learning to make the necessary connection.

But, what does this mean in practice?

We can start planning and building an app before searching for or jumping into the tutorials. Come up with a new idea of an app that you might personally use, or that would solve a specific problem in the world. Choose an idea that you know you have the skills to get started on, but might not know how to implement all of the pieces. And just start building it...until you reach that stuck point (your stretch goal). You've now reached the limit of your current skill-set, and your brain is primed and ready to learn new skills and tie them into your current knowledge and skills. This is called "Just-In-Time" learning.

Step 2: Use "Just-In-Time" Research and Tutorials to Integrate a New Feature

Now that you have something basic up and running, you have truly earned that tutorial and all of the glorious benefits that make us LOVE tutorials! The goal here is to connect a feature that you see demonstrated and coded in a tutorial, and figure out how to integrate it with what you have already completed. You won't be able to follow along and re-create the code of the instructor and have it work as-is. But you will be able to learn some fundamentals, and then modify the code to make it function within your own already-created structure.

Step 3: Make It Your Own To Make It Stick

If you've made it this far in your learning process, you're likely already feeling some feelings of satisfaction. But don't stop yet! Once you've integrated the skills learned from the tutorial into your application once, make sure you can do it again. Ask yourself: "How can I further modify this strategy to make my app even better?" Or, "What else could I accomplish using a similar strategy?" And then, build that feature. As you continue modifying the strategy and building new similar features, the learning will become solid.

Example 1: Watershed Monitor

I used this approach for one of my bootcamp projects. I wanted to create a tool for the public to report water quality best practices, violations, water quality data.

Step 1: Build on What You Already Know

I already knew how to create a Rails API backend, I knew how to use JavaScript to develop a frontend including forms, and I knew how to make the backend and frontend communicate with each other to get, post, patch, and delete records.

The piece I needed to learn was how to use a mapping integration to allow users to record geographic coordinates with their reports, and to display reported data on a map.

So I jumped right in and started working on my Rails API, my forms, and my general user interface before tackling my stretch learning goal related to maps.

Step 2: Use "Just-In-Time" Research and Tutorials to Integrate a New Feature

This was my "Just-In-Time" moment to learn about mapping. I discovered that the Google Maps JavaScript API provided all of the functionality I was looking for, and was based upon and closely mirrored many of the JavaScript fundamentals I had already started using in my application. I used the Google documentation, tutorials, and code examples, as well as some "how to" blog articles to piece together a strategy for displaying a base map, adding markers, getting coordinates, and displaying data using info windows. When I started to see the map components working together with my forms and Rails API, I felt truly accomplished!

Step 3: Make It Your Own To Make It Stick

At this point, the application worked, but I enhanced it by color-coding the markers, and adding a filter feature so that users could choose what type of data is displayed at a given time. Adding these features forced me to refactor some of the map-related code I had already written, and the modifications helped me to better understand how all of the Google Maps components fit together to create the full functionality in my application. You can read more about the Watershed Monitor application here.

Example 2: COVID-19 World Tracker

After graduating from Bootcamp, I really wanted to practice using data from an external API, and learn how to visualize it using D3. The "Just-In-Time" learning approach was a perfect fit for this project.

Step 1: Build on What You Already Know

I already knew how to create a React app and fetch data. I knew how to create a dashboard-like layout using React-Bootstrap's grid system and Card containers, and I knew how to rig up interactive buttons with event listeners.

The piece I needed to learn was how to use D3 (as in...I knew nothing). I also needed to learn how to take a stand-alone D3 chart, or other type of visualization, and integrate it with React to re-render with different types of data that are fetched from the external API.

Step 2 and 3

I won't repeat the research and tutorials that helped me gain this new knowledge, since I've already shared the details in my blog series: React and D3: Dynamic COVID-19 Visualizations. But after following this learning recipe, I was able to effectively create bar charts and maps (based on tutorial content), but make them interactive using tools and approaches I was already familiar with.

Final Thoughts

If this idea of "Tutorial Hell" is new to you, check out some of these other posts and comments:

Have you encountered this "Tutorial Hell" problem? How do you avoid it? What approaches do you use for learning and applying new skills with tutorials?