https://github.com/erickwendel/recreating-uglifyjs-talk
All the references, slides, and resources from my talk "Recreating UglifyJS From Scratch: Demystifying Code Minification and Source Map Generation".
https://github.com/erickwendel/recreating-uglifyjs-talk
abstract-syntax-tree code-generation code-generator codegen javascript minify-javascript nodejs source-maps uglifyjs
Last synced: 19 days ago
JSON representation
All the references, slides, and resources from my talk "Recreating UglifyJS From Scratch: Demystifying Code Minification and Source Map Generation".
- Host: GitHub
- URL: https://github.com/erickwendel/recreating-uglifyjs-talk
- Owner: ErickWendel
- Created: 2025-06-13T11:45:14.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-13T12:36:46.000Z (12 months ago)
- Last Synced: 2025-10-03T14:46:19.097Z (8 months ago)
- Topics: abstract-syntax-tree, code-generation, code-generator, codegen, javascript, minify-javascript, nodejs, source-maps, uglifyjs
- Homepage:
- Size: 8.79 KB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Recreating UglifyJS Talk: Demystifying Code Minification & Source Maps
[](https://ewbr.cc/recreating-uglify-slides)
[](https://bit.ly/creating-your-own-uglifyjs-code)
Welcome! This repository gathers all the references, slides, and resources from my talk **"Recreating UglifyJS From Scratch: Demystifying Code Minification and Source Map Generation"**.
## 🚀 About the Talk
Unlock the secrets of code minification and source map generation! In this session, you'll:
- Explore Abstract Syntax Trees (ASTs) and their role in code manipulation.
- Recreate a simplified version of UglifyJS from scratch.
- Learn how source maps work and how to generate them.
- Get inspired to build your own code-generation tools.
## 📚 Table of Contents
- [Slides](#-slides)
- [Source Code](#-source-code)
- [Premium Content](#-premium-content)
- [References](#-references)
- [Getting Started](#%EF%B8%8F-getting-started)
- [Feedback](#-feedback)
## 🎤 Slides
- [View the slides](https://ewbr.cc/recreating-uglify-slides)
- [View the video](https://ewbr.cc/uglify-video)
## 💻 Source Code
- [Step-by-step UglifyJS recreation](https://ewbr.cc/recreating-uglify-code)
- [ESLint Clone tutorial(related project)](https://ewbr.cc/eslint-video)
## 🏆 Premium Content
- [Ebook: Recreating Node.js from Scratch](https://bit.ly/ebook-recreating-nodejs)
- [Mastering Node.js Streams](https://bit.ly/nodejs-streams-training)
## 🔗 References
- [Blog Post: Source Maps](https://web.dev/source-maps/)
- [Source Maps Visualizer](https://sokra.github.io/source-map-visualization/)
- [Enable Mapping on Firefox](https://umaar.com/dev-tips/96-resolve-variable-names)
- [Source Maps Spec](https://sourcemaps.info/spec.html)
- [TC39](https://tc39.es/)
- [TC39 Source Maps Proposal](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#)
- [acorn (AST generator)](https://www.npmjs.com/package/acorn)
- [escodegen (JS code generator)](https://www.npmjs.com/package/escodegen)
- [AST Explorer](https://astexplorer.net/)
- [Base64 VLQ (spec)](https://tc39.es/ecma426/#sec-base64-vlq)
- [Node.js Source Map API](https://nodejs.org/docs/v22.16.0/api/module.html#sourcemapfindoriginlinenumber-columnnumber)
- [Chrome DevTools: Source Maps](https://developer.chrome.com/docs/devtools/javascript/source-maps)
- [UglifyJS AST](https://github.com/mishoo/UglifyJS/blob/v2.0/lib/ast.js)
- [Variable-length quantity (Wikipedia)](https://en.wikipedia.org/wiki/Variable-length_quantity)
- [Minification (Wikipedia)](https://en.wikipedia.org/wiki/Minification_%28programming%29)
## 🛠️ Getting Started
This repository is a companion to the talk and serves as a reference hub. For hands-on code, check out the [source code links above](#-source-code).
## 💬 Feedback
Have suggestions or want to contribute more resources? Feel free to open an issue or reach out!
---
Enjoy your journey into the world of code minification and source maps!