DEV Community: Rizki Citra

I Built a Free CV Builder With No Login, and Your Resume Never Leaves Your Browser

Rizki Citra — Mon, 02 Nov 2026 15:07:57 +0000

Introduction

You know the moment. You spend an hour on some resume builder, fixing your bullet points, picking a nice template. Then you click Download, and it says: "Upgrade to Pro to export your PDF."

Or it lets you download, but the PDF has their logo on the bottom. Or it wants your email first.

I got tired of that. So I built the one I wanted, and I called it Lanjut.

When I first wrote about it in July, it had six templates. On October 29 it hit 1.0, with a desktop app for Mac, Windows, and Linux. Today it's on 1.6, with twenty templates. And the three rules from day one are still the same:

In short:

No login. No sign-up, no email, no password. Open it and write.

Free, and open source. No paid plan, no trial, no watermark. The code is on GitHub under AGPL-3.0.

Your resume stays on your device. It's saved in your browser. There's no server that stores it.

Try it at lanjut.org.

By the way, Lanjut means "continue" in Indonesian. Which is also what "resume" means. I'm still a little proud of that one 😅

Rule 1: No Login

Q: Do I need an account?
A: No. Go to lanjut.org/editor and start typing.

Think about who needs a resume builder the most. Someone who's looking for a job. A fresh graduate, or someone who just got laid off last week. They don't need one more account, one more "verify your email", one more newsletter.

So Lanjut has no accounts at all. Not "optional sign-up". None.

Rule 2: Free, and Open Source

No paid plan. No trial that ends after seven days. No watermark on your PDF. Download as many times as you want, in PDF, Word (.docx), or plain text.

How can it be free? Because it costs me almost nothing to run. There's no database and no user accounts to keep. Cloudflare serves the site, and your browser does the rest. When the server bill is close to zero, a paywall would just be greed.

And it's open source under AGPL-3.0. So you don't have to trust anything I write in this post. You can read the code.

Rule 3: Your Resume Stays on Your Device

This is the one I care about the most.

A resume has your phone number (some country requires it), your email, your city, and your whole work history. Most resume builders keep all of that in their database. Lanjut is local-first: everything you write is saved in your browser's own storage (IndexedDB), on your machine.

Since you're reading this on dev.to, here's a fun test. Open DevTools, go to the Network tab, and type in the editor for a minute. Your resume doesn't go anywhere. There's nothing to send it to.

There's also a privacy page that lists every single time the site talks to a server, like loading the page or checking for a desktop update. It's a short list.

Q: So what happens if I switch laptops?
A: You download a backup. One small file holds a profile and all its resumes, and you open it on the other machine. That file goes wherever you send it. Not to me.

Does It Actually Pass the ATS?

Quick context: an ATS (Applicant Tracking System) is the software many companies use to read your resume before a human does. It copies the text out of your PDF and sorts it into fields. If your layout confuses it, your job titles end up mixed with your hobbies, and nobody ever tells you.

I'll be honest: no tool can promise you get through. Every company sets up its ATS differently. What Lanjut can do is make sure the file is right: real text, standard headings, and one reading order from top to bottom. That's why it has no tables and no two-column layouts. You still choose the fonts, spacing, colors, and section order.

And instead of asking you to believe that, the home page shows it:

On the left is the page a recruiter sees. On the right is the text pulled out of a real PDF, generated right there in your browser. Drag the handle to compare. If the right side reads in a clean order, so will most parsers.

What's in 1.6

The 1.6 release was a big one:

Fourteen new templates, so twenty in total. Every one keeps the same reading order. Only the look changes.
Colors for your name, headings, lines, and links. Lanjut refuses a color that's too light to read on white.
Contact labels, so you can show "LinkedIn" instead of a long URL. It also warns you, because some ATS only read the visible text.
A download page that picks the right installer for your computer.

And a few things that were already there, but people keep asking me about:

Profiles. Keep one profile per kind of job, like one for frontend roles and one for product roles. Each has its own resumes and contact details.
Import your old CV. Drop in a PDF, and Lanjut sorts it into sections.
Works offline. Open it once, and it keeps working without a connection. The desktop app works offline too.
English and Indonesian, for the app and for the resume itself.

For Developers

Okay, this is my favorite part. Open Preferences and turn on Developer mode. Now the editor has a Form/Code switch, and you can write your whole resume as Markdown, YAML, or JSON. The page updates as you type.

I mean, we write README files all day. Why not a resume?

The stack, if you're curious: Astro with React islands for the site, zustand for state, synced to IndexedDB. The PDF export runs in a Web Worker through WebAssembly, so even a big export never freezes the page. The desktop app is Tauri, loading the same static build from disk. I wrote about the architecture in more detail on my site.

Closing

Lanjut is v1 now. For me, that means the promise is locked: no login, free, open source, and your resume stays on your device. New features will keep coming, but those four won't change. If a feature ever needs an account or a server copy of your resume, it won't ship.

So if you're job hunting, or you know someone who is, give it a try:

Use it in the browser at lanjut.org
Get the desktop app for Mac, Windows, or Linux
Read the code, open an issue, or leave a star on GitHub

And that's it, folks. Thank you for reading until the end, I hope this post is useful for you.

A Powerful CSS Pseudo Class, Let's Take a Look at CSS :has()

Rizki Citra — Sun, 18 Dec 2022 17:23:29 +0000

Introduction

Well, since CSS got upgraded to version 3 in 1998, A lot of things happened, and until now, CSS has already got many features that we can use to enhance our website to be more beautiful and interactive.

Web Developer will never leave their CSS behind because it's one of the cores of the technology behind the web, current CSS version let us use our creativity by crafting modern and accessible web applications.

But more features mean we need more time to think about how it works (again), although most modern web apps use CSS framework for managing their stylesheet, enhancing our fundamentals about the core of the CSS framework itself is necessary.

CSS has never been easy, not a few people understand how CSS works (including me), but there is a person out there ready to help you fall in love with CSS, check out his YouTube channel.

One of the problems is that CSS is not a programming language, so it's very hard to debug when something goes wrong, and you might think " CSS is quite easy, we change something, the UI reflected, what's the hard part?". That's what I thought when I was using Bootstrap, but the hard part is when you do all the stuff and some elements didn't quite fit with your expectation, like setting how to set this style to a specific element that contains this.

Well if you back to 1998 to do all those stuff, it's going to be challenging, but don't worry we now have the feature to do all those stuff.

It's a CSS pseudo-class that will handle all of those for you. Just imagine you want to target an element that contains something and also the element shouldn't contain something again, it's like a condition in a programming language.

if(somethingOk && somethingOkToo) // do the stuff

Pretty cool right? now before we talk about this feature, let's talk a little bit about what CSS pseudo-class is.

What is CSS pseudo-class?

In CSS, A pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.

I'm not going to talk much about what pseudo-class is, but here's a simple explanation of it, we will have a button with a black background color, and the text color will be white, I'm also going to add some padding.

.button {
  padding: 0.75rem;
  background-color: black;
  color: white;
}

Result:

We have a nice button there, now let's add interaction, such as color change when the user hovers over the element with :hover pseudo-class.

.button {
  padding: 0.75rem;
  background-color: black;
  color: white;
}

.button:hover {
  background-color: red;
}

Now the button would look like this:

After I added the :hover pseudo-class, the button will change it's color if I hover over the element, that's my simple explanation about the pseudo-class.

What is CSS :has() pseudo-class?

The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element concerning a reference element by taking a forgiving relative selector list as an argument.

Q: Why it's called a functional?
A: Because this type of pseudo-class accepts parameters rather than just calling it like :hover

CSS :has() pseudo-class will accept forgiving relative element and will apply a style if the parameters are valid as specificity.

CSS :has() pseudo-class often described as "Parent Selector" because a lot of people use it to target the parent element but then they actually want to select a specific element that matches with the condition.

As such, you might want to chill and understand how :has() works, this might break your mental model about the CSS itseld, now to simplify how :has() works, take a look at this CSS snippet:

/* Matches <a> elements that contain an <span> child with a class colored */
a:has(span.colored) {
  /*...*/
}

/* Matches <a> elements that directly contain an <img> child */
a:has(> img) {
  /*...*/
}

/* Matches <section> elements that DON'T contain any heading elements: */
section:not(:has(h1, h2, h3, h4, h5, h6)) {
  /*...*/
}

CSS :has() examples

Let's take a look at these example of how the CSS pseudo-class :has() works

<main>
  <section>
    <h1>Punctuation</h1>
    <p>A simple punctuation will never arrive at a dragon's house tonight.</p>
  </section>

  <section>
    <h1 id="vergil">Punctuation</h1>
    <p>Hi Andrew can I borrow your pen?</p>
    <p>Lorem ipsum dolor sit amet constectum adpisicing elit.</p>
  </section>
</main>

section:has(h1#vergil) {
  color: blue;
}

The result is going to look like this:

So what is happening? as you can see, I'm targetting the section element that has an h1 element with an id of vergil, and then the whole section will have a text color of blue.

It's kinda confusing if you read this pseudo-class for the first time, but you should feel comfortable later.

Another example is when your website has a lot of images and some of the images will have a figcaption in them. This way you can use a different style to the image that has a figcaption by using CSS :has() pseudo-class.

<div class="container">
  <figure>
    <img src="/mr-crab-dank.jpg" alt="Mr. Crab" />
  </figure>
  <figure>
    <img src="/your-ms-puff.jpg" alt="Ms. Puff" />
    <figcaption>Ms. Puff waving at you</figcaption>
  </figure>
</div>

Also with a little bit of base styling with this CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  padding-top: 0.875rem;
  width: 91%;
  margin: 0 auto;
  max-width: 524px;
  display: flex;
  flex-direction: column;
  gap: 0.765rem;
}

.container figure {
  width: 100%;
}

figure img {
  display: block;
  width: 50%;
  margin: 0 auto;
}

The result will look like this

Now we have 2 images that contain Mr. Crab and Ms. Puff, but you as can see between the images, only Ms. Puff who have a
descriptive figcaption.

Now let's style an image that contains figcaption to be different from the other images. I'm going to style it to have padding and box-shadow.

figure:has(img + figcaption) {
  padding: 0.75rem;
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

And the result will be like this

I simply add some padding with a box-shadow to the <figure> element, if the <figure> element has a child that is an <img> element but also has <figcaption> element that is a sibling of the <img /> element.

I hope I explained well with that sentence 😅

But the point is I can style the <figure> element but with a condition if the element has a certain element or is followed by another selector by using CSS :has() pseudo-class.

CSS :has() can also be used along with another pseudo-class, for example using :nth-child(n) to manage grid column. This can be useful if you don't want to use Media Queries that much.

/* This will apply if a container has 4 children or more */
.container:has(:nth-child(5)) {
  ...;
}

/* This will apply if a container has 4 children or more */
.container:has(:nth-child(10)) {
  ...;
}

The above snippet can be used to modify our grid column to be 1 when the container has 5 or more items, but when the container has 10 or more items, a different style can be applied, for example, styling a grid column to be 2.

Browser Compatibility

CSS pseudo-class :has() is now already supported on many browsers, including Chrome, and Edge, but not for Internet Explorer and Firefox.

Internet Explorer is already dead anyway so this is not a problem because so many people already use a modern web browser like Edge or Chrome.

But be careful, CSS :has() is not supported on Firefox, but it can be enabled, so you need to be aware of this one, as of today, there are a lot of people still using FireFox.

Support Fallback

As on firefox, CSS :has() pseudo-class is not enabled by default, you might need to think about the fallback, fortunately, we have CSS at-rule to handle if the browser support some rules or style.

@supports (selector(:has(p))) {
  /* Supported! */
}

This will seek if the browser supports the CSS :has() pseudo-class.

Closing

And that's it, folks, We're reaching the end of this post, thank you so much to read the blog till the last part. I really appreciate and I hope this post is useful for you.