How to Build a Dynamic Animated Resume with Webpack, ES6, and Custom DOM Tools

Idea of a Moving Resume

This moving resume behaves like a typist continuously entering text, creating a dynamic visual effect, or like a pre‑recorded video that we simply watch.

Principle consists of two parts:

The continuously updating text displayed on the page.

The layout effect controlled by a hidden style tag.

Imagine adding a character 啊 to the page every 0.1 seconds—just start a timer and repeatedly append 啊 to body. That completes the first part of the principle.

Now, if you also want to change the character’s color and the page background, you can periodically inject CSS rules into the style tag with another timer, achieving the second part of the principle.

Project Setup

In this project we use:

Webpack 2 for building.

Yarn for dependency management.

ES6 syntax.

Native DOM APIs for some operations.

Standard.js for code style enforcement.

The directory structure is shown below:

The most important modules are:

resumeEditor – the resume editing module.

stylesEditor – the resume style editing module.

vQuery – a lightweight DOM utility.

app.js – the entry module that ties everything together.

vQuery (DOM Utility Module)

This small module provides a constructor Vquery whose instances expose simple DOM manipulation methods; it is exported as an anonymous function so that it can be used like $(...) similar to jQuery.

stylesEditor (Resume Style Editing Module)

The core method showStyles renders the resume layout by converting markdown to HTML.

app (Entry Module)

The entry module integrates all previous modules. It demonstrates the classic “callback hell” pattern, which, while functional, leads to unreadable code. The article shows how to replace it with promises, generators, and async/await.

Because timers are asynchronous, the resume generation involves multiple async steps that must be executed sequentially. The repository provides several branches to illustrate different solutions:

master – using callbacks.

promise – using promises.

generator‑thunk – using generator + thunk.

generator‑promise – using generator + promise.

async – using async/await.

Solving Callback Hell with Promise

Promises provide a cleaner, more readable way to handle asynchronous operations. The promise branch of app.js shows a vertical flow where each step resolves before the next begins.

The code is much clearer, with each asynchronous step wrapped in a Promise and resolved at the appropriate point.

Solving Callback Hell with Generator‑Thunk and Generator‑Promise

Both approaches rely on ES6 generators. Generators combined with thunk functions or promises allow asynchronous code to be written in a synchronous style.

The example logs 2222 after 200 ms and 1111 after 1 s, demonstrating how the generator’s next function can control execution order.

By moving the pointer to the next generator step only after the previous async operation finishes, the flow mimics synchronous code. For many async steps, a helper like co can automate this process.

Solving Callback Hell with async

async is syntactic sugar over generators. Once you understand generators, using async/await becomes straightforward. The async branch of the project contains the final implementation.

Conclusion

The article may contain inaccuracies; feedback is welcome. If you find the project useful, consider giving it a star on GitHub. Source code: https://github.com/qianlongo/resume-native