DEV Community: Francesco Esposito

Resuml - YAML to resume

Francesco Esposito — Thu, 19 Jun 2025 20:28:38 +0000

Introducing Resuml: YAML-powered Resume Builder

Resuml is an open-source CLI tool that helps you manage your resume as code. Write your resume in YAML, validate it, and export to JSON or HTML using professional themes.

Key Features

YAML-first: Author your resume in a simple, human-readable YAML format.
Validation: Ensure your resume data is correct with built-in validation against the JSON Resume schema.
Export Options: Convert your YAML to JSON or render it as HTML using themes like Stack Overflow or React.
Theme Support: Choose from available themes for a professional look, or create your own.
CLI & API: Use Resuml from the command line or integrate it into Node.js projects.

Quick Start

Install: npm install -g resuml
Write your resume in resume.yaml
Validate: resuml validate --resume resume.yaml
Export to JSON: resuml tojson --resume resume.yaml --output resume.json
Render HTML: resuml render --resume resume.yaml --theme stackoverflow --output resume.html

Example YAML

basics:
  name: John Doe
  label: Software Engineer
  email: john@example.com
  summary: Experienced software engineer...
  location:
    city: San Francisco
    countryCode: US
  profiles:
    - network: GitHub
      url: https://github.com/johndoe

Why Resuml?

Keep your resume versioned and editable as code
Easily switch between formats and themes
Open-source and privacy-friendly
Find out more and contribute at https://github.com/phoinixi/resuml

I Built a Modern React Theme for JSON Resume

Francesco Esposito — Sat, 12 Apr 2025 15:55:47 +0000

Creating a Better Resume Experience with React

Over the past few weeks, I've been working on a project that combines my love for clean design and React development – a modern theme for JSON Resume called jsonresume-theme-react.

Why Another Resume Theme?

If you're not familiar with JSON Resume, it's a fantastic initiative that lets you manage your resume as a JSON file. The ecosystem has several themes, but I found most of them were either outdated or missing features I wanted.

I needed something that:

Used modern React
Supported multiple languages
Rendered markdown in descriptions
Looked good both on screen and in print

So I decided to build my own, and I'm pretty happy with how it turned out!

What Makes This Theme Different

I've focused on creating a balance between professional appearance and modern functionality:

React 18 & TypeScript - Built on current tech for better maintainability
Multi-language Support - Create different versions of your resume for different languages
Markdown in Descriptions - Format your job descriptions with proper lists and emphasis
Print-Optimized - Carefully designed to look great when printed to PDF
Responsive Design - Looks good on everything from phones to desktops

The theme uses Tailwind CSS for styling, which made it much easier to create a responsive layout that prints well.

A Look Inside

The theme renders all standard sections from the JSON Resume schema:

Basic information with optional profile photo
Work experience with properly formatted date ranges
Education history
Skills with optional proficiency levels
Projects and volunteer work
Languages and interests

Here's a small example of how work experience renders with markdown support:

"work": [
  {
    "name": "Company Name",
    "position": "Senior Developer",
    "startDate": "2020-01-01",
    "endDate": "2022-12-31",
    "summary": "Led development of key products",
    "description": "- Rebuilt the authentication system\n- Improved performance by 40%\n- Mentored junior developers"
  }
]

This renders as properly formatted bullets in the final resume, making it much more readable than plain text.

Supporting Multiple Languages

One feature I'm particularly proud of is the multilingual support. The theme detects the language from the "language" property in your resume JSON:

{
  "basics": {
    "name": "John Doe",
    "label": "Programmer"
  },
  "language": "en",
  "work": [
    // work history
  ]
}

You can create versions for different languages:

{
  "basics": {
    "name": "Jean Dupont",
    "label": "Développeur"
  },
  "language": "fr",
  "work": [
    // work history in French
  ]
}

This is perfect if you're applying for jobs internationally or in bilingual markets.

The Development Process

Building this theme taught me a lot about:

Optimizing for print media - CSS for print is surprisingly tricky
Component organization - Breaking down a resume into logical React components
Handling internationalization - Working with dates and text in multiple languages
Balancing design and function - Creating something that looks good but prioritizes content

The most challenging part was ensuring the theme remained faithful to the JSON Resume schema while adding extra features. I wanted to make sure it would work with existing resume data without modification.

Try It Yourself

If you want to give it a spin, the theme is available on npm and GitHub. I've created detailed documentation in the repository about installation and configuration options.

I'd love to hear what you think or see examples if you use it for your own resume! I'm still actively developing it and plan to add more customization options in the future.

What's Next?

I'm planning several improvements:

Theme customization through configuration
More layout variants
Custom sections support
More export options

Have you used JSON Resume before? What features would you want in a resume theme? Let me know in the comments!

The project is open source and available at github.com/phoinixi/jsonresume-theme-react

Two-way data binding in vanilla JS (POC)

Francesco Esposito — Sat, 02 Feb 2019 14:44:02 +0000

As Front-end Engineers we mostly use libraries and/or frameworks to develop and maintain complex web apps, but what there is under the hood? Do you ask yourself that question? You don't!? Well, You should! 🙃

In this post, I would like to extend the previous example to two-way data binding. 🕺

Two-way data binding 🤓
If you are not familiar with that concept, two-way data binding means that every change to the state is immediately propagated to the view (and vice-versa).

Check out the demo below for a quick example:

DEMO

Let's break it down

What do we need to have two-way data binding?

A view, in our example HTML.
A state, kept in memory with JavaScript.

The Key feature is:

Every time the state changes, the view needs to be updated (one-way data binding)

but also

Every time the view changes, the state needs to be updated

So let's assume we have an HTML view:

    <div class="field">
        <label for="name">Enter your name:</label>
        <input id="name" type="text" name="name"  data-model="name" />
      </div>

      <div class="field">
        <label for="title">Enter your title:</label>
        <input id="title" type="text" name="title" data-model="title" />
      </div>

      <div class="results">
        <h1 data-binding="name"></h1>
        <h2 data-binding="title"></h2>
      </div>

and a state:

    const state = {
      name: 'Francesco',
      title: 'Front-end Developer'
    };

We can easily set the view the first time:

    document.querySelector('[data-binding="name"]').innerHTML = state.name
    document.querySelector('[data-binding="title"]').innerHTML = state.title
    document.querySelector('[data-model="name"]').value = state.name
    document.querySelector('[data-model="title"]').value = state.title

But we want some magic, so that when we update the state:

    state.name = 'Richard'
    state.title = 'Technical Lead'

the view should update too.

To achieve this, we could modify the default behaviour of the set property for the state object, so that other than update the state, it would also update our view.

One way to do that in JavaScript is using the Proxy Object:

    const createState = (state) => {
      return new Proxy(state, {
        set(target, property, value) {
          target[property] = value; // default set behaviour
          render(); // updates the view every time the state changes
          return true;
    }
      });
    };

    const state = createState({
      name = 'Francesco'
      title = 'Front-end Engineer'
    });

With the power of the Proxy every time we update our state, the render function will be called.
A possible implementation of render can be:

    const render = () => {
     document.querySelector('[data-binding="name"]').innerHTML = state.name;
     document.querySelector('[data-binding="title"]').innerHTML = state.title;
     document.querySelector('[data-model="name"]').value = state.name;
     document.querySelector('[data-model="title"]').value = state.title;
    };

We just miss the last little piece. Every time we modify the view, the state should change accordingly. We can obtain that adding an event listener to the inputs: 😎

    const listener = (event) => {
      state[event.target.dataset.model] = event.target.value;
    });

   document.querySelector('[data-model="name"]').addEventListener('keyup', listener);  
   document.querySelector('[data-model="title"]').addEventListener('keyup', listener);

And Voilá! Now the trick is complete! 👨‍💻

More generic implementation (POC) 🌟

Resume in JSON: jsonresume-theme-stackoverflow

Francesco Esposito — Mon, 28 Jan 2019 22:43:48 +0000

Resume in JSON 🤓

A few years ago I discovered jsonresume, a very promising project aimed to provide a json-schema to write a resume.

I immediately got excited and I wrote 2 templates for that: 👨🏼‍💻

jsonresume-stackoverflow-theme: code and demo which I am proud of 🕺
another one that I actually don't like anymore 😆

My first handcrafted resume template 🌟

The StackOverflow template was my first resume written using web technologies and it has some popularity, I got contributions and features requests. I use it myself as my resume and a bunch of my friends use it too. However, the schema is not very flexible and the last iteration was done 5 years ago json-resume-schema.

The current stack to write a template for json-resume is quite old too: Handlebars.js.

Need for a rewrite 😎

My idea is to fully rewrite my StackOverflow template, (maybe the json-schema too, but this is another story) using different technologies, the most reasonable that come to my mind are:

React
Custom Elements

HELP ❤️

Is anyone interested in that project?
Which technologies to do you advice me to choose and why?

One-way data binding in vanilla JS (POC)

Francesco Esposito — Fri, 25 Jan 2019 11:05:33 +0000

Code and Demo

Let's break it down in small pieces

I assume you are already familiar with data-binding.

Most of the modern front-end frameworks offer data-binding out of the box, just ready to use, but what there is under the hood?

I tried to implement a basic version of one-way data binding and it was really fun :)

So, what do we need to have one-way data binding?

A view, in our example HTML.
A state, kept in memory with JavaScript.

The Key feature is:

Everytime the state changes, the view need to be updated

So let's assume we have an HTML view:

    <div data-binding="quote"></div>

and a state:

    const state = {
      quote: 'Either you run the day, or the day runs you.'
    };

We can easily set the view the first time:

    document.querySelector('[data-binding="quote"]').innerHTML = state.quote

We want some magic, so that when we update the state:

    state.quote = 'We become what we think about'

the view should magically change. To achieve this, we could modify the default behaviour of the set property for the state object, so that other than update the model, it would also update our view.

One way to do that in JavaScript is using the Proxy Object:

    const createState = (state) => {
      return new Proxy(state, {
        set(target, property, value) {
          target[property] = value; // default set behaviour
          render(); // updates the view everytime the state changes
          return true;
    }
      });
    };

    const state = createState({
      quote: 'Either you run the day, or the day runs you.' // creates initial state
    });

With the power of the Proxy everytime we update our state, the render function will be called.
A possible implementation of render can be:

    const render = () => {
     document.querySelector('[data-binding="quote"]').innerHTML = state.quote
    };

Now if we modify the state with:

    state.quote = 'We become what we think about.'

The render function will be called and the view will update! MAGIC! 👨‍💻