Renato Böhler, frontend developer

Logossim was a result of my undergraduate thesis on Computer Engineering. As the name implies, Logisim— an acclaimed logic circuit simulation software — was a big inspiration for this project.

The simulator offers 27 base components, including I/O, logic gates, memory, plexers, and wiring utilities. With those components, it is possible to build fun circuits, like this one, that play “The Imperial March” from the Star Wars franchise.

Every component has its own set of configurations, which can be set by the user and determine how it looks and behaves during the simulation.

The core principle of this project is to be easily understandable by anyone with some web development background (HTML, CSS, and JS). To achieve this, I implemented a custom-built logic simulation engine.

This engine runs on a Web Worker thread and orchestrates the simulation, handling user input, propagating signals, and communicating with the UI thread via messages.

The user interface was built on top of react-diagrams, which was heavily customized to support bifurcations across links, right-angle links, copy & paste and undo & redo functionalities, among other customizations implemented to make Logossim look and feel like Logisim.

Some other features of this application are:

• Component configurator with previews
• A welcoming and informative tour
• Saving and loading of circuit files
• Auto saving
• Keyboard shortcuts

The inspiration for this project came to me after I realized how many developers had trouble understanding functional-styled methods like map, filter, reduce or even Object.entries or Object.fromEntries on JavaScript.

I started noticing that people would understand those concepts much faster by visualizing a flowchart that explains how data gets transformed through each method.

Thus What the Filter? was born with a simple vision: the user inputs some code, and the application generates a diagram detailing each transformation and each value in intermediate steps.

Before building such diagram, the application transforms the code into an Abstract Syntax Tree (AST) and detects the initial input. It then performs static analysis to determine the order in which every method would get called. After that, it executes them with their corresponding inputs to determine all intermediate values.

What the Filter? also warns users about JavaScript methods that may have pitfalls:

• methods that mutate the object instead of returning new ones (like splice)
• sort, which will infamously cast numbers to strings before sorting if no comparing function gets provided

Another convenient feature: should any error occur during a transformation, the diagram still gets generated up until the method that failed, and the output tries to explain what went wrong based on common mistakes.

What the Filter? can be helpful for new developers trying to learn functional programming concepts, but it can also be used by experienced developers to debug and understand more complex transformations.

Oh, and I almost forgot! You can generate URLs like this to share a specific transformation with your colleagues.

This was my first published open-source project and NPM library. Its goal was to make adding input masking to redux-form fields an easy task.

Of course, with redux-form being pretty much deprecated for some time now, I haven't been devoting much time to this project lately.

But the experience of building and publishing a library with its documentation for the first time was worthwhile, and I've learned a lot from it. It also feels good to see other developers using your library on their projects 🤩

It was also my first time configuring a CI/CD pipeline by myself. I've used Travis CI, running semantic-release to automatically determine the version number and publish to NPM, as well as deploying the new documentation to GitHub Pages. I've also configured Codecov to automatically generate test coverage reports and Danger JS to analyze pull requests.

I wrote the first version of my portfolio in Vue.js. It was much simpler (and less beautiful) than the one you're looking at right now.

This is the “2.0 version” of my portfolio, completely rewritten from the ground up using Next.js. It's a personal project, so everything you see here was done exclusively by myself, from design and assets through implementation and deployment.

I decided to treat this project as my piece of art, so I'd only work on it when I felt inspired enough to do so during my free time. I rebuilt every section of this portfolio 2 or 3 times before being happy with the outcome. That might explain why it took me about two years to finish it 😅

I'm someone who loves having fun while building beautiful stuff, and I wanted this page to be unique and reflect who I am — both professionally and personally.

This site tells the story of my professional career, but it's also full of personal details. For instance, the footer contains a topographic map of my hometown in the background, and the “made with ❤ by” vector was hand-written by myself.

I wanted visitors to feel like they knew me just by looking at my portfolio, and that's why I've built the About section as an interactive chat simulator, so anyone can experience how it feels talking to me. But if you're looking for the real deal, feel free to get in touch 😉