Hey, Team Vercel! I’d love to be
Vercel’s next Design Engineer
Throughout my professional life, I have been helping companies build digital products. I fell in love with Vercel years ago. Being able to work on it with you would be a dream come true.
Dom Habersack
Munich, Germany
At the intersection of design and development
Years of professional experience
Overlap with your tech stack
In a prime location
Teaching everything I know
Geoff
5 minutes agoHey, who wants to take on this new project?
Chris
2 minutes agoI’ll let others go first, I haven’t worked with this tech yet.
Dom is typing…
Always looking for a challenge
Good on camera
Hey there!
My name is Dominik “Dom” Habersack. I live in Munich, Germany, with my wife, our two year old daughter, and our dog Cooper.
As a consultant and freelancer, I have supported companies from e-commerce startups to automotive corporations with hands-on design, development, and product work throughout my career. For the last eight years, the majority of my projects used a stack based on React.js. More recently, Next.js has become an integral part of my work.
After running my own company for a few years, I am now looking for a new challenge pursuing a shared mission together with a strong team. Your ad for a Design Engineer matches both what I am looking for and what I can offer. I hereby apply for that position and hope the following gives you a first impression of how I could contribute.
To pick up the conversation, you can schedule a chat via my booking link. I’m looking forward to getting to know you!
Cheers,
Some of my favorite projects
Turning a household item “smart”
We helped a maker of household items evaluate a feature by faking most of it. They gave us a modified prototype with a Raspberry Pi integrated before the low-level bus, which acted as a middleman between web and mobile clients and the device. We ran a WebSocket server on it, through which the clients could control the device remotely and provide feedback on its performance. Based on user input, the Pi would make custom adjustments to the device’s “smart settings”.
I took on Product Owner, UI Designer, and Developer responsibilities in this project, which we worked on as a very small team. My tasks included requirements engineering, designing user flows, creating clickdummies, and implementing features in our client applications.
React.js
styled-components
Redux
Python
Raspberry PiMy coffee was:
Based on your feedback, your next configuration code is:
The project wasn’t about coffee, but it’s a close comparison.
Designing interactions for hospital equipment
This project had a special place in my heart, which is a pun that will make sense in a second.
This client manufactured medical equipment to measure electrical activity in a patient’s heart during open heart procedures. It was wild, doubly so for someone who easily faints at even the mention of blood. (Being able to occasionally turn down the volume during remote meetings was a godsend.)
They also developed a React.js application for visualizing the measurements and creating procedure protocols. I supported them as a UX Designer and Developer, exploring ways to make that interface more user-friendly and implementing the findings.
TypeScriptReact.js
GraphQLstyled-componentsFigma
Fat marker sketches allowed us to quickly and cheaply explore and compare different approaches.
Drawing lovely icons
When Font Awesome was everywhere, I was looking for an icon set to give my projects a more unique look. Not finding anything that matched my taste, I created one myself.
I have since grown the collection to over 180 icons that have helped me create a cohesive, custom appearance across projects.
SketchReact.jsNext.jsTailwind CSS
GitHub
GitHub ActionsDoing shocking things with browser extensions
This client wanted to remind customers of their loyalty program when online shopping at partner stores. I helped build a browser extension to “enhance” the browsing experience on these sites, adding features such as custom notifications and checkout integration.
We developed the extension using Angular.js and Less. Because we couldn’t use iframes, we had to jump through a few hoops to ensure our styles wouldn’t interfere with the host pages and vice versa. Wild z-index values and MutationObservers helped us fix many one-off issues.
JavaScriptTypeScript
Angular.js
LessGitHubSave 20% on your next purchase
Turn on savings mode and earn cash while shopping here.
My personal collection of Tailwind components
As I often copied components from one personal project to the next, it made sense to collect them for easier reference. It provides basic components I need frequently, with new ones joining as I extend my projects.
The project has a website, and a basic version for use in React is available on npm as @yieldui/react. It served as a model for similar libaries I set up for clients.
TypeScriptReact.jsTailwind CSSGitHub
npm<div className="flex rounded-md shadow-sm">
<span className="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 bg-gray-50 px-3 text-gray-500">
https://
</span>
<input
className="w-full appearance-none rounded-l-none rounded-r-md border border-gray-300 bg-white px-3 py-2 text-base text-gray-700 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:ring-offset-0 focus:ring-offset-white"
placeholder="domhabersack.com"
type="text"
/>
</div>My heart beats for sharing knowledge
Blogging
On my blog, I write about what I learn in my work. While many articles focus on code and productivity, some cover design topics, such as how disecting layouts teaches us the invisible rules that make a good design great. Others talk about how we can make decisions that combine our professional curiosity with given business requirements.
Code snippets
Inspired by popular design and coding tweets, I shared a bunch of JavaScript and related code snippets of my own on Twitter. I collected them on my personal site, where you can browse all snippets.
// we can use this shorthand notation to map array items to another type [4, 8, 15].map(String) // ⇒ ["4", "8", "15"] ["16", "23", "42"].map(Number) // ⇒ [16, 23, 42] [1, 1, 0].map(Boolean) // ⇒ [true, true, false]
// we can use this shorthand notation to map array items to another type
[4, 8, 15].map(String) // ⇒ ["4", "8", "15"]
["16", "23", "42"].map(Number) // ⇒ [16, 23, 42]
[1, 1, 0].map(Boolean) // ⇒ [true, true, false]Live streaming
When I don’t do client work, I enjoy live streaming coding and design sessions. Most include Next.js, Tailwind CSS, and third-party APIs. I throw in the occasional palate cleanser, like one in which I attempted LinkedIn Skill assessment quizzes that I had no business taking in the first place.
You might particularly enjoy the recording of this stream I did where I used the YouTube API to show my past recordings in my Next.js-based personal site.
“Hello Together!”
Having worked in many multilingual teams, I saw many avoidable mistranslations cause misunderstandings. Words that look similar but have different meanings in two languages could lead to someone asking for the “real status” when they wanted to know the “current status”, for example.
Because of its positive reception, I expanded a company-internal talk on the topic into an email course. To this day, this short course’s titular lesson is the most visited page on my personal site.
Public speaking
In most situations, I consider myself an introvert. Still, put me in front of a camera or on a stage, give me 30 seconds to get settled in, and I slay. I’m having the absolute best time once I get into Presenter Mode, where my drive to share knowledge takes over.
I have given talks on frontend development, the dangers of Dark Patterns (which I recreated for YouTube), real-world stories about User Experience design, and more. Given the chance, I’d enjoy speaking about Next.js and Vercel at events.
Guest-post on Smashing Magazine
I wrote an article for Smashing Magazine on how to set up many-to-many relationships in a Next.js project. In it, I show how keys in Markdown frontmatter can reference other types of content. I could take the pattern I had already used in many projects, abstract it, and walk readers through the setup step by step.
As this was a very practical article, I made the code available on GitHub. The repository has been forked and starred by a few people since. What I find most intriguing is that some still occasionally do, years after the article went live, showing that it’s still relevant to developers today.
multi-author-blog/ ├─ _authors/ │ ├─ dom-habersack.json │ └─ dom-wearing-a-hat.json ├─ _posts/ │ ├─ hello-world.md │ └─ styling-react-with-tailwind.md ├─ app/ │ └─ … └─ public/ ├─ dom-habersack.jpg └─ dom-wearing-a-hat.jpg
multi-author-blog/
├─ _authors/
│ ├─ dom-habersack.json
│ └─ dom-wearing-a-hat.json
├─ _posts/
│ ├─ hello-world.md
│ └─ styling-react-with-tailwind.md
├─ app/
│ └─ …
└─ public/
├─ dom-habersack.jpg
└─ dom-wearing-a-hat.jpgMy favorite tools and technologies
Development
I first used React when class components and shouldComponentUpdate were the state of the art. Lacking conventions, every client project reinvented the wheel of data fetching, routing, and SSR in their own way. The out of the box experience of Next.js made my life so much easier.
TypeScriptReact.jsNext.jsReduxGraphQL
Node.jsStyling
BEM notation in combination with Sass was the gold standard for me for the longest time, thinking its pseudo-separation of concerns was the most reasonable option. My curiosity got the better of me, and I got hooked on Tailwind CSS and utility classes after a single project.
CSSTailwind CSS
Headless UI
Sassstyled-componentsPrototyping and Design
I use Sketch in my personal projects. I even created a few plugins that speed up my workflows, like one that lets me add syntax highlighting to text layers with shiki. Still, Figma is unbeatable for collaboration. I use it heavily to make sure everyone across roles is on the same page before we implement a feature.
SketchFigma
StorybookSEO and Analytics
While many clients have a hard time moving away from Google Analytics and its tight integration with Google Ads, I prefer more privacy-friendly alternatives. I have also worked in the mine field that is GDPR.
ahrefs
Google Tag Manager
Google Analytics
Fathom Analytics
Plausible AnalyticsContinuous Integration and Delivery
GitHub Actions run all my workflows, like deploying new versions of this site to a VPS with each commit to main. Among other tasks, I also use them to publish new versions of libraries to npm. I’ll confidently tweak Docker images, but wouldn’t set one up from scratch without a reference.
GitHub Actions
DockerVersion Control
This one probably goes without saying. I don’t miss the days of working with SVN. “How to undo commit” appears in my search history so much, I should probably get git reset HEAD~1 tattooed on my forearm by now.
gitGitHub
GitLab
BitbucketTesting
Having seen too many projects where minor changes caused major regressions, I use TDD whenever I’m working with uncertainty. I have grown fond of Mock Service Worker for mocking third-party APIs to ensure my code reacts well to different responses.
Jest
Vitest
Testing Library
Mock Service Worker
PlaywrightData Sources
A huge part of my work is reading data from one API, rendering it, and sending different data to another API. Having worked along the full web stack, I have created and consumed countless APIs connecting services together.
Prisma
MongoDB
PostgreSQL
Contentful
ShopifyPlanning and Documentation
While I have seen teams follow “Scrum for Dummies” to the letter, the best and most efficient teams I was on adapted their processes to their specific needs. Take the good, skip the bad, make adjustments along the way. Everything else is tools.
Jira
Trello
Confluence
Notion
ObsidianWhat I’d love to do at Vercel
I think of myself as a product person that feels at home in both development and design. My work experience has equipped me with the ability to pick up new technologies and adapt to new challenges quickly.
Seeing an idea through from its inception to release and beyond is what I love most about my work. Making sure everybody involved understands the motivation and reasoning behind a project allows for much smoother collaboration. I enjoy working with stakeholders of all responsibilities to help establish that shared understanding.
I am convinced that a team performs best in an environment of productive feedback where everyone collaborates. The best ideas emerge when people tackle a problem together, each bringing their unique perspective and experience to the table.
Sharing knowledge through video and writing is a passion I would love to bring to Vercel. I am comfortable on camera, and could see myself work on educational content in several areas. One idea I have would be to show off the official starter templates in a series of videos, building full products with them.
Don’t just take my word for it
“Dom is one of my favorite colleagues to work with, with a curious mind and an incredibly strong foundation. He never tired of teaching and challenging the team while being an absolute joy to work with. I still reach out to him to discuss some topics because his input is so valuable! Grab him while you can!”
“Putting Dom in charge of the frontend of our platform was a no-brainer. He was always keen to drive initiatives and delivered high-quality results. He filled skill gaps in the team and supported others so they could contribute at the same level. I cannot recommend him highly enough.”
“Dom has this way of making you eager to know more. He is empathetic, funny, and refreshingly humble. He always took on our most challenging tasks, broke them down into smaller parts, solved those, and shared his learnings. Our brainstorming sessions are some of my fondest professional memories. Together, we’d always find ingenious solutions to any issue. Working with Dom is about getting the job done while having tons of fun.”
Let’s talk!
I hope this has given you an idea of how I could contribute to Vercel. There is a lot more I couldn’t fit on this page.
Not only do I see a lot of overlap between my skills and what you’re looking for, I am also a huge fan of your work. Next.js has quickly become an integral part of my daily work. I would be absolutely honored to contribute to it and related projects.
I set up this booking page so you can pick a slot that works best for you. I am very much looking forward to meeting you.
Schedule a chatHave a great day,