Using MutationObserver API and undo.js to track DOM changes

I was recently working on this project that had a kind of drag and drop builder. Users should be able to drag items into a specific building area to assembly stuff — I’m sorry for not giving more details, by the time I’m writing this the product is not yet released. One of the features I had to implement was a pair of buttons to undo and redo actions.

Every time an item is added to the builder, a DOM change happens. So, I started to look for ways to track changes in the DOM. That’s when I found about MutationObserver API. That web API is implemented by most of the modern browsers, Internet Explorer 11+ included, and allows you to observe DOM changes using a simple approach. The second tool that helped me build this was undo.js. It’s a simple Javascript class that allows developers to implement actions tracking in an exceptionally easy way.

After coding this feature, it seemed to me that combination of tools might be useful for a lot of other use cases. So I wrote this fiddle to demonstrate how they can be used together:

https://jsfiddle.net/straube/wh35f5yp

If you have any question, the comments area below is all yours.

Advertisements

Simple Gallery — Uma simples galeria baseada em jQuery

Na maioria dos projetos que desenvolvemos na CodeKings, acabamos não conseguindo usar as opções de galerias disponíveis na web. Isso acontece porque a estrutura do plugin não é compatível com o layout ou faz muito mais coisas do que realmente precisamos. Nesses casos, acabamos escrevendo um script simples que resolve mais rapidamente do que se tivermos que adaptar alguma solução pronta. Com o tempo, percebi que esse script não mudava muito de um projeto para outro, então resolvi escrever uma versão genérica que é bem simples de customizar.

Publiquei o projeto no GitHub: https://github.com/straube/simple-gallery.