skip to content

Abstract Syntax Trees

Abstract Syntax Trees (ASTs) are a structured representation of code that allows for safe transformation or transpilation from one format to another. This is how tools like Babel, MDX, and more work under the hood. Learn how to work with ASTs from expert developers in these episodes.

Build Your Own Babel Plugin

Babel might seem like magic, but Laurie Barth is going to teach us how developers of any skill level can build custom Babel plugins for fun and/or profit!

Automate Image Performance Using ASTs

To get the best possible website performance, we should be optimizing our images, generating different sizes for different viewport resolutions, and adding support for lazyloading. That’s a lot of work — unless you automate it. In this episode, Phil Hawksworth (https://twitter.com/philhawksworth) teaches us how to improve image performance automatically using AST transformations.

More Fun with AST Transformations

In this follow-up to the previous stream on abstract syntax trees (ASTs), Jason dives deeper and tries to figure out how to rewrite HTML image tags to use srcSets, cloud image processing, and other performance optimizations.

Transform Content With Abstract Syntax Trees

What are abstract syntax trees (ASTs)? How can we use them to make changes to files? In this episode, Jason dives into the world of ASTs and writes his first transformation using unified, remark, and rehype.