Skip to content

Projects

  • Developer Tooling šŸŒ next-img ā€“ a Next.js plugin for optimized images

    By default, Next.js or Webpack doesnā€™t help you with optimizing images. This means custom configuration or scripting, processing images by hand, using an image CDN or not optimising images at all. next-img provides and alternative streamlined approach for adding images to your Next.js projects. It combines a Next.js plugin, a custom webpack loader and a React component to make serving images in an optimal fashion in a way that is almost as easy as typing <img src='foo.png' />.

  • Developer Tooling šŸ§˜ā€ā™€ļø Healthier ā€“ an opinionated code linter

    I have been a long time fan of Standard ā€“ the JavaScript Style Guide. It removed a lot of decisions and discussions from the teams Iā€™ve worked with. And it became an essential tool for every single JavaScript project Iā€™ve worked on for the last several years. One dependency and you get consistent code style and catch a lot bugs right in your editor.

    Prettier, another tool that was created to boost productivity, came out in 2017 and Iā€™ve had a serious look at it more recently. And it is amazing. Not only it takes away having to make decisions about your code style, but it also formats code for you and does that really well. This really speeds up development.

    The issue with Standard is that itā€™s just a linter, it canā€™t format your code nearly as well as Prettier can. The issue with Prettier is that itā€™s only a formatter and it doesnā€™t tell you about potential bugs in your code. And the issue with trying to use them both is that their incompatible, Prettier formats the code in a way that doesnā€™t match Standardā€™s Style Guide.

    This is where Healthier comes in. Itā€™s just like Standard in pretty much every aspect, but with all of the style linting rules removed. This way you can format your code with Pretter and lint it with Healthier.

  • Library āš›ļø Tiny Atom ā€“ Pragmatic and concise state management

    Tiny Atom is a React state management library. Actually, itā€™s framework agnostic, but there you go. Yes, yes, itā€™s a little bit like Redux. Yes, Iā€™m one of those people. To be honest, it is a little frustrating, this whole topic.

    I long believed that Redux had and still has a good idea behind it. Itā€™s a very powerful idea of modeling your applicationā€™s state and transitions. But Iā€™ve also long believed that Redux API is less than optimal. The issue I think is that it was simply created, worked well enough, and then too quickly got too popular, essentially freezing the API. Why is it so popular then if itā€™s not that good? I donā€™t know, maybe because of the docs? Tutorials? Momentum? Ecosystem? Cargo cult? Dan?

    Tiny Atom is not perfect. I am always thinking about how to develop the next version, it hasnā€™t clicked 100%. But for now, itā€™s a library I choose commonly for the task and it hasnā€™t disappointed.

  • Website šŸ‘½ Spaceboard ā€“ a free and fresh tech job board

    Spaceboard is a free to post and free to read job board for techies. It takes inspiration from the timeless utility and familiarity of sites such as Hacker News. It tries to remove all the noise and leave you with a focused stream of job posts. Itā€™s a little experiment we launched out of Zero. It hasnā€™t gained much traction yet ā€“ distribution of products is much more challenging than building them. But it was a good practise round and we have a lot more to give.

  • Developer Tooling šŸš€ Jetpack ā€“ Webpack made more convenient

    Jetpack is one of these projects that aims to help developer productivity. Over the years Iā€™ve seen the same pattern being used over and over for bootstrapping Single Page Apps. Hereā€™s what you do with jetpack.

    Install it into a fresh repo. Create index.js with some code. For example, React.render(...). And now run jetpack. And thatā€™s it, you have a working and ready to ship to production application setup. You can add a Node.js based API into this same repo. And once youā€™re ready ā€“ jetpack can build the appā€™s assets for you to deploy to your favorite hosting provider or your internal company infra. Touching webpack config wasnā€™t necessary.

  • Research šŸ¦œ PolyChrome ā€“ Standard ML in your browser

    PolyChrome is an extension for Firefox that can run Standard ML programs embedded in HTML documents. The extension provides a foreign function interface to JavaScript. As a result, JavaScript libraries and interfaces provided by the browser, such as DOM and Canvas, can be used from Standard ML.

    This project is a fun memory, especially since the compile to JS use cases have gained huge popularity in recent years. Back in 2011 it wasnā€™t clear if compiling ML to JS was the most performant approach or whether it was better to utilise FFI. The mechanic of how the language got executed in the browser was less interesting, the focus and the fun part was exploring how UIs would get built using a pure functional language.

    And now, years later, we have Reason (ML family) using React (a functional approach to UI) and even React Native (a message bridge between JavaScript and a native host).