ponyfoo.com

Open-Source

Showcase of some of the contributions I’ve made to open-source modules

I wrote hundreds of open-source modules for both front-end development and Node. You can find all of my public work on GitHub. The vast majority revolves around a lot of simple JavaScript modules, and helpful command-line utilities, as well as workshops, and the occassional browser extension. I’ve published JavaScript and CSS quality guides on GitHub, as well as a detailed ES6 feature list.

Below, you can find a few of the projects I enjoy maintaining and working on.

Promisees

Promise visualization playground for the adventurous

Promises can be terribly hard to understand. Unsettled promises lead to hard-to-debug programming mistakes that can be very costly in terms of productivity. I made this visualization tool to assist novices and experts in understanding the inner workings of Promise.

You can play around with Promise, record animated gifs, and understand promises using the demo page.

Dragula

Drag and drop so simple it hurts

Most libraries that deal with drag and drop are really complicated to use. Dragula aims to fix this by exposing a super-simple container-based API that is still able to accomodate for the most advanced use cases as well. Dragula is implemented using pure DOM and it has a very small footprint. There are also convenient wrappers for React and Angular.

If you’d like to learn more about Dragula, I suggest you head over to the demo page.

Contra

Asynchronous flow control with a functional taste to it

Contra is a modular utility library that helps you reduce complexity in your asynchronous JavaScript code. Its API is modeled after async, but Contra has the distinct goal to be small, enough to fit in the browser; modular, so that you can just take the methods you need; and more concise: most of the library is based on a queue implementation that’s 30 lines of code long.

Dominus

Lean DOM Manipulation

Dominus implements most of the DOM manipulation aspects of jQuery, but it has a much smaller footprint because it doesn’t include its own selector engine, AJAX, CSS “effects”, nor promises. It uses a tiny library as a replacement for Sizzle – jQuery’s selector engine.

An interesting aspect of Dominus is that it returns extended native Arrays – thanks to poser below the hood – which enables you to use methods like .map and .forEach on the DOM elements without having to cast the results returned by Dominus.

perfschool

Find your way through the performance optimization maze in this NodeSchool workshopper

NodeSchool is a worldwide event based on open-source workshops like this one. Like most other NodeSchool workshops, perfschool is self-guided, meaning that you get a few instructions and you’re good to start experimenting on your own and figuring out for yourself how to implement the solutions.

In perfschool you are presented with different situations where you’ll have to face performance issues, and you’ll have to measure, analyze, and improve performance – all the while looking at pictures of cats.

Woofmark

Barking up the DOM tree. A modular, progressive, and beautiful Markdown and HTML editor

Woofmark is an all-in-one Markdown, HTML, and WYSIWYG editor. It’s not concerned with the back and forth parsing itself, leaving the implementation up to you. Of course, reasonable defaults are recommended: megamark for converting Markdown to HTML, and domador to convert HTML back into Markdown.

It considers Markdown as its single source of truth, even when you disable the Markdown mode in the editor. This makes woofmark more secure and less error-prone.

Taunus

Micro Isomorphic MVC. Progressive Enhancement. Content-First. Single-Page Applications (that are also server-side rendered). Predictive Caching. Bring Your Own View Engine.

Taunus is an MVC framework for Node.js that brings you closer to progressive enhancement. It encourages the use of plain <form> and <a> tags as the main means of user interaction and navigation. It handles rendering on the server-side, and then when the client-side JavaScript is executed, clicks on <a> elements are hijacked – turning your application into a Single Page App. Similarly, <form> submissions are hijacked through dynamic injection of an <iframe>, allowing you to build modern and highly responsive apps while still following the fundamental founding blocks of the web.

You can even use skyrocket to implement realtime communication with WebSockets. All you have to do is hook it up and then you’ll be able to render partial views whenever new data comes down the wire.

To get started with Taunus, you might want to look at its documentation, at the source code for my blog, or at the source of giffy.club – which is a simpler demonstration of how to use it.

Rome

Customizable date (and time) picker. Opt-in UI, no jQuery!

Rome is a simple date picker that’s also implemented using pure DOM – just like Dragula. It has a simple API just as well, and it comes with sensible defaults. It aims to be as unobtrusive as possible, which is why you’ll be able to change the date on the <input> element as the calendar is open, and it’ll be updated instantly.

It’s also highly customizable, allowing you to define valid and invalid date ranges, formats, styling, and i18n. You should check out the demo, to see it in action.

Hubby

A lowly attempt to describe public GitHub activity in natural language

Hubby is an old project of mine that I keep visiting whenever I want to find the most popular repos are for somebody who has a ton of stars. It also produces a list of random commits made by that user, as well as an attempt at describing their public activity using natural language.

It uses the public GitHub API to find data about their users, and it then caches the results in localStorage. It’s entirely implemented on the client-side, and there’s no server involved. Hubby is hosted on GitHub Pages. I hacked it together once upon a sunday, so it’s not exactly the sharpest thing I ever released. It was a fun project, though.

Hit That

Render beautiful pixel perfect representations of websites in your terminal

This is one of the smallest modules I ever wrote, but it’s really fun and it has some interesting use cases. You can use it to render a pixelated representation of a website in your terminal. You’re allowed to tweak the width and height of the viewport, as well as the amount of pixel columns of output, which in some cases greatly improves the quality of the representation.

Before hit-that I also made hget, which is similar in that you can use to render websites on your terminal. The difference is that hget crawls the page and strips HTML tags, printing the content as colorized plain text.