Designing a micro-learning about Webpack

I wish to introduce my colleagues in less than 30 minutes to the use of “Webpack” a new tool in our toolchain. The documentation is poor, the tool fits in several places so it’s complicated to cover it all. Many posts exist but they are loooong and confusing.

Option 1: Give detailed step by step instructions. It will be long, and pointless since the tool is already automatically installed. It can be part of a stretch assignment, though.

Option 2: Link to resources like the mentioned posts or the documentation. It’s going to be long to read, no context, no motivation. Can be used for references tough.

Option 3: Chunk and split the explanation over several cards. Bad again following Nick’s wise recommendation. You end up with 5 cards and it’s a course disguised into a micro-learning. The more so that Webpack is 1 among 20 topics to be covered. You end up with 100 cards, 1500 minutes, 25 hours! Knowledge dump ahead.

The right option is to isolate the 5 key ideas and build around them. It’s called a Microlearning and Learning postcards are an ideal format to implement one.

One idea is central. It’s a sentence describing what the learning is about. Ideas can be expressed as definitions, instructions or clauses.

Webpack packages and serves all the files of a browser app.

The very first idea presented to the learner should be the answer to “What’s in It for Me? (WIIFM)”. It sets the context of the learning in the setup of the recipient. It is the entrance of the Microlearning.

Webpack solves the problem of transpilation and assembling modules for client apps.

The next three should hammer in the key points of the learning. Some of them could potential be the hooks for more learnings. If you can express everything on them, it’s fine.

– Hot reloading: It will update the app and the display automatically as soon as you make changes.
– It’s a huge productivity enhancement and it assures end-user deployment will be safe. It favors agility.
– It’s very configurable using a javascript file, versatile but a bit confusing to setup.

Front side of the card

No need to state the ideas exactly as you captured them. We would express them with visuals, metaphors, stories. Some explanation can help to make it more digestible. Being centered around the recipient mindset and the key ideas avoid to end up with a knowledge dump. Pictures or short screen captures can help to support each idea. Since they are short, they can be taken by the expert himself.

The first step of the card can be done very quickly. A few seconds are enough to get an idea, a few minutes to watch and read everything.

Don’t get into every needy-gritty details. Don’t get into exceptions unless they are the focus of the experience. Take a 9000 feet height approach. Let learners get further by using the extra materials, resources, stretch assignments available behind.

If the learner stays hungry and has his curiosity awaken it’s not bad. This tension will serve to entrenched the learning deeper. The learner will continue to think on the topic and extrapolate what could be next. He will try to relate to what he knows already and imagine applications. This takes place away from the card. When he’s motivated and ready to get further he turns the card. It can be immediately after or in the next 24 hours. The card will stay in his box.

The card will stay in his virtual index box, easy to reach and flagged as unfinished.

Back of the card

Starting from here the rest of the micro-learning is to engage the learner to give it a try. It’s the application in the context of the work that will complete the work experience.

The back of the card is made of widgets: assessments, lists of links, reading of resources, longer videos. The list can be expanded as the concept is open. It’s imagined that less than 5 widgets will be used at a time.

We could start by asking 3 questions.

Cloze deletion test, filling the blank type, reusing the key ideas:Open style: Name a project or a technique that would benefit from using webpack

“It’s very configurable using a _____ file, versatile but a bit confusing to setup”

A multiple choice question (one of, all right answers, identity the wrong statement)

Webpack can be used to : A, B, C

Open style: Name a project or a technique that would benefit from using Webpack.

We can reuse the key ideas to correct the learner.

The card serves also as a hub for more resources. Kept in the virtual index card box, you can always go back to it to get links to resources. So the place of learning has a lasting use as a bookmarks place.

So we end up with an artifact which is not content based, it’s not a resource and it’s also not a course. It’s in the middle.

Fun Note: Webpack 2.0 has just been released today and the documentation was totally rewritten. ‘Documentation is Poor’ is now history. if I had done a regular long form course, it would already be obsolete. In a microlearning form, combining little content and links it’s faster to update.