DEV Community: Lin Aung

I Got Tired of Running OpenSSL Commands, So I Built a CLI for JWK Generation

Lin Aung — Fri, 27 Feb 2026 08:46:16 +0000

There's a certain kind of frustration that only developers know. When you need to do something relatively simple, but the tooling forces you through 4 manual steps, terminal commands you have to Google every time, and output files you're not sure are formatted correctly.

That's exactly what happened to me with JWK keys.

The Problem

I was integrating with a service that required keys in JWK (JSON Web Key) format. Not PEM. JWK.

I already knew how to generate a key pair with OpenSSL:

openssl ecparam -name prime256v1 -genkey -noout -out private.pem
openssl ec -in private.pem -pubout -out public.pem

But converting those PEM files to JWK? That's where it got annoying. I ended up writing a one-off Node.js script, manually constructing the JWK object, double-checking that the kty, crv, x, y, d fields were all correct, and saving the output.

It worked. But I thought: I'm probably going to need to do this again. And I don't want to redo this every time.

So I built jwk-cli-tool.

What It Does

It's an interactive CLI that handles the full workflow:

Generate a new PEM key pair (EC or RSA)
Convert PEM files to JWK JSON format
Or do both in one flow

You get four files at the end: *.private.pem, *.public.pem, *.private.jwk.json, and *.public.jwk.json.

Supported algorithms:

EC: ES256, ES384, ES512
RSA: RS256, RS384, RS512

How to Use It

No installation needed. Just run:

npx jwk-cli-tool

You'll get an interactive menu:

? What would you like to do?
> Generate new PEM key pair
  Generate JWK JSON files
  Exit

From there it walks you through naming the key, picking the algorithm, and choosing whether to generate fresh PEM files or use existing ones from your /keys folder.

The generated files land in keys/ for PEM files and outputs/ for JWK JSON files. Both folders are created automatically if they don't exist. If a key name already exists, it asks before overwriting.

A Quick Look at the Output

Running through the flow for an ES256 key produces something like this for the public JWK:

{
  "kty": "EC",
  "use": "sig",
  "alg": "ES256",
  "kid": "myapp",
  "crv": "P-256",
  "x": "f83OJ3D2xF1Bg8vub9tLe1gHMzV76e8Tus9uPHvRVEU",
  "y": "x_FEzRu9m36HLN_tue659LNpXW6pCyStikYjKIWI5a0"
}

The private JWK includes the d parameter on top of that.

Tech Stack

Built with Node.js and TypeScript, using @inquirer/prompts for the TUI and Node's built-in crypto module. No heavy external crypto dependencies.

The outputs write to process.cwd(), so wherever you run npx jwk-cli-tool from, that's where your keys/ and outputs/ folders appear.

Source Code

The project is open source:

GitHub: github.com/dev-lin2/jwk-cli-tool
npm: npmjs.com/package/jwk-cli-tool

PRs and feedback welcome. If there are algorithms or features you'd find useful (EdDSA/Ed25519, JWKS array output, non-interactive flag mode for CI pipelines) feel free to open an issue.

Sometimes the best tools come from solving your own problem. Hopefully this saves someone else the same 30 minutes of OpenSSL googling.

I Built a Pixel Art CV Template (Open Source)

Lin Aung — Mon, 16 Feb 2026 03:55:37 +0000

A retro-styled portfolio website built with React and TypeScript that you can customize in minutes

Why Another Portfolio Template?

Let's be honest - most developer portfolios look the same. Clean, minimal, professional... and boring.

I wanted something different. Something that shows personality while still being functional. So I built a pixel art CV website that combines retro aesthetics with modern web technologies.

Live Demo: pixel-cv-seven.vercel.app

GitHub: github.com/dev-lin2/pixel-cv

What Makes This Different?

🎮 Pixel Art Aesthetic

Retro 8-bit style UI that stands out without being gimmicky. Perfect for developers who grew up on classic games or just appreciate the aesthetic.

📝 JSON-Driven Content

Your entire CV lives in a single cv.json file. No need to touch React components to update your experience, skills, or projects.

{
  "name": "Your Name",
  "title": "Your Title",
  "bio": "Your bio here",
  "experience": [...],
  "skills": [...],
  "projects": [...]
}

⚡ Modern Tech Stack

React - Component-based UI
TypeScript - Type safety and better DX
Vite - Lightning-fast builds
Tailwind CSS - Utility-first styling
Framer Motion - Smooth animations

📱 Fully Responsive

Works seamlessly on desktop, tablet, and mobile devices.

Quick Start

1. Clone the repo

git clone https://github.com/dev-lin2/pixel-cv.git
cd pixel-cv

2. Install dependencies

npm install

3. Update your content

Edit public/cv.json with your information:

Personal details (name, title, email, location)
Bio
Work experience
Skills
Projects
Education
Social links

4. Customize branding

Replace public/logo.png with your own logo

5. Run locally

npm run dev

6. Deploy

Build for production:

npm run build

Deploy to Vercel, Netlify, or any static hosting platform.

Project Structure

pixel-cv/
├── public/
│   ├── cv.json          # Your CV data
│   └── logo.png         # Your logo/favicon
├── src/
│   ├── components/      # React components
│   ├── App.tsx          # Main app component
│   └── main.tsx         # Entry point
├── index.html
└── package.json

Key Features Explained

Data-Driven Design

The entire homepage is rendered from cv.json. This means:

✅ No code changes needed for content updates
✅ Easy to maintain
✅ Version control your CV
✅ Multiple CVs for different roles (just swap the JSON file)

Pixel Perfect UI

Using custom fonts and carefully crafted components to achieve that authentic retro look while keeping the code clean and maintainable.

Performance Optimized

Vite for instant HMR during development
Optimized production builds
Lazy loading for images
Smooth animations without jank

Customization Tips

Change Color Scheme

The pixel aesthetic uses a limited color palette. You can customize colors in tailwind.config.ts:

theme: {
  extend: {
    colors: {
      'pixel-primary': '#your-color',
      'pixel-secondary': '#your-color',
      // ... more colors
    }
  }
}

Add New Sections

Want to add a "Certifications" or "Publications" section?

Add the data to cv.json
Create a new component
Import and render it in App.tsx

Modify Animations

All animations are handled by Framer Motion. Tweak timing, easing, and effects in the component files.

Why Open Source?

I believe good tools should be accessible to everyone. Not every developer has time to build a portfolio from scratch, but everyone deserves a unique one.

This template is:

✅ Free to use
✅ No attribution required (though appreciated!)
✅ Open to contributions
✅ MIT licensed

What's Next?

Some features I'm considering:

[ ] Dark/light mode toggle
[ ] Multiple CV templates (JSON-driven theming)
[ ] Blog integration
[ ] Print-friendly version
[ ] Multi-language support

Got ideas? Open an issue or submit a PR!

Try It Out

Demo: pixel-cv-seven.vercel.app

GitHub: github.com/dev-lin2/pixel-cv

If you use this template, I'd love to see what you build! Drop a link in the comments below.

And if you find it useful, a ⭐ on GitHub would mean a lot!

Tech Stack Summary

React 18
TypeScript
Vite
Tailwind CSS
Framer Motion
Lucide React (icons)

Happy coding! 🎮✨

4 TailwindCSS Features You’re Probably Sleeping On 😴 (With Playground Demo)

Lin Aung — Mon, 08 Sep 2025 09:15:18 +0000

Most people use Tailwind for the basics: flex, grid, spacing, colors. Cool.
But Tailwind is hiding some ridiculously useful tricks that can save you custom CSS and even JavaScript.

I've picked 4 features that I rarely see people talk about — and I bundled them into one live playground demo so you can poke at right now 👉 Playground link

1. group & peer: Style Without JavaScript

Ever wanted to show a button on hover? Or expand a section when a checkbox is checked? Normally you’d need JS. With group and peer, you don’t.

Hover card (group)

<div class="group border rounded-xl p-4 bg-white shadow hover:shadow-md">
  <div class="flex justify-between">
    <p class="font-medium">Project Alpha</p>
    <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
  </div>
  <button class="mt-3 opacity-0 group-hover:opacity-100 transition text-sm text-indigo-600 underline">
    Open
  </button>
</div>

Accordion (peer)

<input id="faq" type="checkbox" class="peer hidden">
<label for="faq" class="flex justify-between cursor-pointer">
  <span>What is Alpha?</span>
  <svg class="h-4 w-4 transition peer-checked:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path d="M5 8l5 5 5-5"/></svg>
</label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-all">
  <div class="overflow-hidden text-sm mt-2">No JS. Just peer-checked ✨</div>
</div>

👉 Perfect for cards, FAQs, menus — all without writing a single line of JavaScript.

2. prose: One Class for Blog-Ready Typography

Ever dropped a wall of text into your site and thought “this looks… bad”?
That’s where prose from the typography plugin comes in.

<article class="prose prose-slate bg-white p-6 rounded-xl border shadow">
  <h1>Designing Calm UIs</h1>
  <p><strong>Calm design</strong> means less noise and clearer hierarchy.</p>
  <h2>Checklist</h2>
  <ul>
    <li>One clear action per screen</li>
    <li>Use space, not borders</li>
    <li>Let color mean something</li>
  </ul>
</article>

3. line-clamp: Control Text Overflow in Style

Product cards, blog previews, news feeds — they all need text cutoffs. Stop writing custom CSS, Tailwind has your back.

<article class="border rounded-xl p-4 bg-white">
  <h3 class="font-semibold line-clamp-1">Cutting churn with better onboarding</h3>
  <p class="text-sm text-slate-600 line-clamp-2 mt-1">
    We redesigned the first session with better defaults, progressive
    disclosure, and less decision fatigue. The results? Way less churn.
  </p>
</article>

👉 Your titles never wrap too long, your descriptions never explode the card. Clean and controlled.

4. Arbitrary Values & Variants: Little Superpowers

Sometimes you just need that exact size or want to style only a specific child on hover. Tailwind lets you break the rules with square brackets.

Exact sizing

<div class="h-[36px] w-[36px] rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-600"></div>

Target child on hover

<button class="flex items-center gap-2 hover:[&>svg]:translate-x-1">
  Open report
  <svg class="h-4 w-4 transition" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
</button>

👉 Super handy for prototypes, micro-interactions, and “just one pixel more” tweaks.

Grab the Playground 🎮

I combined all these into one minimal page so you can explore, screenshot, and copy-paste.
Here’s the link again: https://play.tailwindcss.com/7utBRutgHA

Wrapping Up

Tailwind is way more than spacing utilities. Features like group, peer, prose, line-clamp, and arbitrary variants are the “oh wow” tools that make you faster and your UI cleaner.

Next time you’re about to write custom CSS, ask: “Can Tailwind do this already?”
Chances are — yup, it can.

SOLID principles in PHP

Lin Aung — Thu, 24 Aug 2023 07:04:45 +0000

What is SOLID?

You may have already heard this term **SOLID** in almost every job descriptions and wonder why it is important. Well the SOLID principles are a set of five design guidelines aimed at making software designs more understandable, flexible, and maintainable. These principles are widely used in object-oriented programming, although they can also be applied in other paradigms.

Pillars of SOLID principles

The acronym SOLID stands for:

Single Responsibility Principle (SRP)
Open-Closed Principle (OCP)
Liskov Substitution Principle (LSP)
Interface Segregation Principle (ISP)
Dependency Inversion Principle (DIP)

1) Single Responsibility Principle

A class should have only one reason or purpose to serve. It means the class should have only one responsibility. I'll show one by one with PHP examples.

// Single Responsibility Principle

// Shouldn't do
class Report {
    public function generate() {
        // generating report
    }

    public function saveToFile($filename) {
        // save report to file
    }
}

// Should do
class Report {
    public function generate() {
        // generating report
    }
}

class ReportSaver {
    public function saveToFile(Report $report, $filename) {
        // save report to file
    }
}

2) Open-Close Principle

Instances should be open for extension but close for modification. This mean instances (classes,functions,modules or etc.,) can be extendable by another instance but shouldn't allow direct modification to them.

// Open Close Principle

// Shouldn't do
class Rectangle {
    public $width;
    public $height;
}

function area($rectangle) {
    return $rectangle->width * $rectangle->height;
}

// Should do
interface Shape {
    public function area();
}

class Rectangle implements Shape {
    public $width;
    public $height;

    public function area() {
        // w * h
    }
}

class Circle implements Shape {
    public $radius;

    public function area() {
        // πr2
    }
}

3) Liskov Substitution Principle

This mean that objects of a superclass should be replaceable with objects of a subclass without affecting the correctness of the program. What does that mean? Well let's see the example code for clarifications.

// Liskov Substitution Principle

// Shouldn't do
class Animal {
    public function jump() {
        // code for jumping
    }
}

class Snail extends Animal {
    public function jump() {
        // Sanil can't jump
    }
}

// Good example
abstract class Animal {
    abstract public function eat();
}

class Snail extends Bird {
    public function eat() {
        // every animal can eat
    }
}

class Tiger extends Bird {
    public function eat() {
        // every animal can eat
    }
}

4) Interface Segregation Principle

We shouldn't force the instances to implement the interfaces that they don't use. We should make the interface flexible for most cases.

// Interface Segregation Principle

// Shouldn't do
interface Human {
    public function walk();
    public function swim(); // not everyone can swim
}

// Should do
interface Walkable {
    public function walk();
}

interface Swimmable {
    public function swim();
}

class People implements Walkable, Swimmable {
    public function walk() {
        // walking
    }

    public function swim() {
        // swimming
    }
}

5) Dependency Inversion Principle

This principle aims to decouple high-level modules (which provide complex functionality) from low-level modules (which provide basic functionality) by introducing an abstraction layer between them. This allows both high-level and low-level modules to depend on abstractions rather than on solid implementations, making the system more flexible, extensible, and maintainable.

// Dependency Inversion Principle

// Shouldn't do
class Book {
    public function getContent() {
        // return contents
    }
}

class Printer {
    public function printBook(Book $book) {
        $content = $book->getContent();
        // print the content
    }
}

As you can see in above example, Printer class is depending on Book object and can only print for the Book. What if there is another class called Article that may want to print? We shouldn't modify the Printer class to accept more objects. Instead we provide the abstractions between them.

// Dependency Inversion Principle

// Should do
interface Printable {
    public function getContent();
}

class Book implements Printable {
    public function getContent() {
        return "This is the book content";
    }
}

class Article implements Printable {
    public function getContent() {
        return "This is the article content";
    }
}

class Printer {
    public function printContent(Printable $printable) {
        $content = $printable->getContent();
        echo "Printing content: " . $content;
    }
}

In PHP, these principles help in creating a clean codebase that is easier to debug, understand, and expand. Given that PHP applications often evolve over time, applying SOLID principles can dramatically ease the pain of growth and maintenance.