Robin Malfait

Hi Adam and Steve!

And of course 3rd person who is still a secret to the community 👀.

Who am I?

I am Robin Malfait, a developer living in Ghent, Belgium. I hear you, I know what you think! Geez, that's a big time zone difference. Actually it is not that bad. Let me show you:

Not too bad right? (Psst, it's a tiny React component!)

The required overlap of 4 hours is not that hard to accomplish. I am also willing to work from 2pm - 11pm (my local time) which is 8am - 5pm (your local time) from time to time, which results in a full overlap. Long story short, I don't think the timezone difference would be a big issue here.

I also am happy to take the correct legal actions (going freelance for example) when this becomes real!

I currently still work a full time job, and also am not actively searching for a job. However when I saw this job posting I had to apply since this sounds like a dream job and a once in a lifetime opportunity.

That being said, let's get to my story and why I think we are are a great fit for each other.

My story

Let's get started. I am a 24 y/o developer from Belgium living with my girlfriend and our 2 gerbils in Ghent, Belgium.

When I started software development (when I was about 12 years old) I learned the basics of HTML, CSS and a tiny little bit of JavaScript. After that I moved to PHP. I quickly saw this cool new thing, called Laravel. I've been in the Laravel community for quite some time now. I started with Laravel while it was still in version 3. It didn't even use composer yet! I was also very active on the #laravel and #laravel-offtopic IRC channels.

In 2014 I was a volunteer at Laracon EU 2014 in Amsterdam. I was a freshman in college and had no money, I volunteered thanks to Dries Vints who invited me!

After that I moved to JavaScript development, I also jumped right on the React hype train (when they still used React.createClass()).

In October 2019, together with Marcel Pociot and James Brooks, I volunteered at the Full Stack Europe conference in Antwerp which was organized by Dries Vints and Freek Van der Herten.

It's me on the left!

Why me?

I love to experiment with tools to make the lives of other developers better and better. I also am the go-to JavaScript guy at my current job. I pushed the developer experience forward by introducing a bunch of things. Let me tell you a little bit more about them:

React

For starters, I introduced React at my current job. Previously it was AngularJS (the version back in the 1.X days).

I am very well versed in the various API's that React provides. I know my way around components, hooks, classes and so on. I know what the dreaded key prop is used for (and can be used outside of lists as well!). I'm also not afraid to use context and portals once in a while!

I think I am also pretty good at designing developer friendly component API's. I'm all about tiny and explicit API's (instead of spreading props all over the place).

Some examples of component API's I like:

 1// Compound components.
 2// It doesn't really make sense to use a `Tab` without its `Tabs` parent:
 3<Tabs>
 4  <Tabs.Tab>Tab 1</Tabs.Tab>
 5  <Tabs.Tab>Tab 2</Tabs.Tab>
 6</Tabs>
 7
 8
 9// Explicit API > classNames:
10<Badge>This is a default badge</Badge>
11<Badge variant={Badge.variant.pink}>This is a pink badge</Badge>
12
13// Explicit API with multiple props:
14// I like to expose the available options on the `Component.prop_name.XXX`
15// so that you can always find the correct value.
16<Badge
17  variant={Badge.variant.pink}
18  size={Badge.size.large}
19>
20  This is a large pink badge
21</Badge>
22
23// I don't really like string-based API's because it is hard to maintain
24// in my opinion (refactoring is not that easy because it is a string and not a
25// reference to *something*), however, this example could also be
26// written as:
27<Badge variant="pink" size="large">This is a pink badge</Badge>

I also wrote a small rant about why I don't like components with a className prop because they create implicit components. Ranted a little bit about this after a conversation in the Tailwind UI Discord channel.

• A little rant about a good example.
• A little rant about a bad example.

Tests

There were almost no tests in our various projects. A lot of those projects use Node.js so I introduced Jest for testing. I can now proudly tell you that we have more than 10 000 tests in our applications!

To make things even simpler, I used Tailwind CSS for our tests. Wait, Tailwind for your tests? What does that even mean?!

In Jest you can write custom matchers, for example if you have this piece of code, expect(true).toBe(true), the toBe is a matcher. You can also write custom reporters. An example reporter could be a code coverage reporter.

Back to the topic now, at my current job we have a pretty complex service that allows you to create a timetable. I sadly can't share the code because of NDA reasons, but I can tell you the gist of it. This service allows you to create a timetable which shows you a bunch of slots where a certain person is "available", this takes some rules into account for example travel time, buffer times, availability based on your Google Calendar and so on.

We then wrote a bunch of tests and in the end the assertions looked like this:

1// The `.toBeDiffedAs` is an example of a custom matcher.
2expect({ left, right }).toBeDiffedAs(
3  expected
4);
5
6// Replaced some "business" terms with random variable names

Using a custom reporter we could finally visualize these tests using Tailwind!

Success	Failure

This was a feature that I pitched to my colleagues and to our business people. I was (and still am) extremely proud of it. It was a super cool way to talk about certain behaviour. It was also super easy to spot bugs and walk through scenario's with other people.

Devbox

As I've mentioned before, we have a lot of applications at my current job. It is a bit of a pain to manage everything. A lot of the developers were using a virtual machine so that we don't have to worry about different operating systems. However, this also means that we have to run everything on our computer itself.

I then started tinkering with the concept of a devbox. A virtual machine, but in the cloud. We currently use Digital Ocean droplets for this. This has a bunch of benefits, for example:

• You don't need a beefy computer.
• The npm install and composer install scripts are super fast due to the gigabit internet from the datacenters.

But why am I telling you this? Well, I started working on an (Electron) application to manage this devbox. This is all built using React, TypeScript, Tailwind CSS and of course Tailwind UI!

Let me show you some screenshots:

• A syslog parser + viewer:

  While this looks a bit crowded, I made the trade-off of making things more compact but easier to scan with a lot of information.

  Logs	Raw Logs

Active in the community

I am active on the Discord of Tailwind UI, I sometimes provide help as well. I created the Alpine.js to React bookmark (gist) that allows you to convert the Alpine.js examples to valid React examples, which is currently pinned in the React channel!

I was watching a stream on YouTube from Sam Selikoff the other day and he had it bookmarked as well, which I thought was cool.

Lazy Collections

I know you like collections! I like collections too, however when you write code like this in JavaScript (e.g.: .map().filter().map()) it is very readable, but it is also a bit too slow for certain parts. Because of this reason I created a package called lazy-collections. They are based on iterators and generators under the hood. The best part? You don't need to know how they work since you are not writing generator functions directly.

This allows me to write code in nicely abstracted functions with their own responsibility but while keeping the readability and speed of these collections.

Here is a little example:

 1import { pipe, map, filter, toArray } from "lazy-collections";
 2
 3const program = pipe(
 4  map((x) => x * 2),
 5  filter((x) => x % 4 === 0),
 6  filter((x) => x % 100 === 0),
 7  filter((x) => x % 400 === 0),
 8  toArray()
 9);
10
11program(range(0, 1000000));

Staying in touch

• I subscribe to a few people and repositories on GitHub to stay up to date.
• I follow a lot on Twitter from various people and companies.
  • I mean, have you seen tools like Vite?!
• I follow a few Twitch streamers.
• I follow a few YouTubers.
• I listen to a few podcasts.
• When I feel like it, I open Reddit.

Soft skills

I like to talk, ping pong back and forth, and have long conversations about certain topics. I love to experiment with cool ideas. I do have opinions, I like to discuss / argue / have a conversation about my opinions, but I also love to change / adapt my opinions based on new information.

What the future holds

We can build a lot of great things together!

• For starters, more components!
  • We can create design systems for various platforms:
    • For React we could expose concrete examples, or "headless" components which you can attach all the styles to. Similar to how Reach UI does this.
    • For Vue we can do the same thing.
    • We can even experiment / tinker with ideas on how we can manage this. For example a build system that can "compile" to other platforms for maintainability.
  • We can work on theming & dark mode support (which you mentioned in the job description).
  • We can create high quality components:
    • I see this as a flexible API, but one that allows you to fall into the pit of success.
  • We can create highly interactive components:
    • Data tables.
    • Charting.
    • Forms:
      • Autocompletes.
    • Back office / admin components.
• We can work on official plugins for various IDE's:
  • Thinking of official VSCode, sublime, JetBrains plugins.
• We can work on ESLint plugin(s) for official support:
  • This can include hints when there are classes that clash (block vs flex).
• We can improve the Tailwind CLI:
  • For example, we can make it faster.
  • We can also experiment with other languages to boost performance (thinking about Rust).
• We can work on official "templates" for blogs.
• We can go to other platforms and markets:
  • Tailwind for (native) mobile:
    • Going to iOS with Swift.
    • Going to Android with Kotlin / Java.
• We can create tooling to create awesome documentation pages.

After hours

• I also try and keep learning, for example I am learning Rust using the Rust book!
• I wrote a stupid compiler to play with the whole compiler space (and AST's and what not!).
• Every night I go on a walk with my girlfriend.
• I love a good movie too!

There is a bunch more I would love to talk about, but I hope I already convinced you enough to start a conversation. I am looking forward to your response / feedback!