DEV Community 👩‍💻👨‍💻

Morris Brodersen
Morris Brodersen

Posted on

A TeuxDeux clone in plain HTML, CSS and JS

I wrote a TeuxDeux clone in plain HTML, CSS and JavaScript (no build steps). It's fully animated and runs smoothly at 60 FPS with a total transfer size of 44KB (unminified).

Screenshot

Try it online →

More importantly, it's a case study showing that vanilla web development is viable in terms of maintainability, and worthwhile in terms of user experience (100% faster loads and 90% less bandwidth in this case).

There's no custom framework invented here. Instead, the case study was designed to discover minimum viable patterns that are truly vanilla. The result is maintainable, albeit verbose and with considerable duplication (most of which may be mitigated by ES6).

If anything, the case study validates the value of build steps and frameworks, but also demonstrates that standard web technologies can be used effectively and there are only a few critical areas where a vanilla approach is
clearly inferior (especially in browser testing).

I'd love to hear feedback on the app and the study; let me know what you think :) The full source code and case study can be found here: https://github.com/morris/vanilla-todo

Top comments (1)

Collapse
 
luisferfranco profile image
Luis F. Franco

I really love TeuxDeux, it turns the todo apps upside down telling not what you have to do today but what and when you have to deliver. It's missing lots of features like alarms and so, and the interface while simple could be better (yours is better)

I stopped using it because they didn't have an Android app, but now that they do, I'm coming back, but then I said... why instead of paying I don't make my own app with the features I think its missing? And then I found your post... Might be a good place to start

Thanks!

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!