Praveen Juge

I made three iOS apps and shipped them to the App Store

Praveen Juge (hi@praveenjuge.com) — Mon, 06 Apr 2026 09:30:00 GMT

Over the last few months, I stopped talking about making iOS apps and actually shipped three of them: One Hour, Practice, and Teak.

I stopped talking about making iOS apps and shipped three: One Hour, Practice, and Teak.

You can see all three on my developer page.

Each one started with the same rule: make it useful, make it focused, and make it small enough to finish.

One Hour helps me build healthier routines with simple hourly reminders.
Practice is my habit tracker for daily streaks and consistency.
Teak is my inspiration vault for saving links, images, notes, audio, and documents. It also has its own site at teakvault.com.

The lesson was not about motivation.

It was about clarity.

When I kept the scope tight, the app improved.

When I tried to add too much, the product got blurry.

Expo made this whole thing feel possible. I could build fast, test often, and spend my time on the product instead of getting dragged into native setup. And @expo/ui helped me ship real native UI by letting me build with SwiftUI from React.

Codex helped me keep going. It sped up features, helped fix bugs, and gave me momentum when I would normally stall.

Shipping an app is not just code.

It is the icon, the screenshots, the copy, the privacy details, and the quiet responsibility of keeping the thing alive after version 1.0.

Getting through App Review is a milestone. Continuing to improve the app is the job.

That is my favorite part.

These are not concepts sitting in Figma. They are real apps people can download, use, and judge.

I want to make more.

What the fuck is a designer after Codex?

Praveen Juge (hi@praveenjuge.com) — Sun, 05 Apr 2026 00:00:00 GMT

If AI can generate decent UI and front-end code on demand, the designer's job shifts from making screens to making decisions.

For years, we treated design like it was mostly the act of making screens. Move the pixels. Pick the type. Make the flow. Ship the file. That was always incomplete, but now the gap is impossible to ignore. If Codex can produce interfaces, write front-end code, and generate ten decent options before lunch, then “the person who makes the screens” is no longer a very durable definition.

So what is a designer now?

A designer is the person who decides what matters. What should be there, and what should not. What needs to be clear. What needs to be quiet. What earns trust. What creates tension. What helps someone move forward without feeling confused, rushed, or small. When making goes faster, deciding becomes more valuable.

That means the work moves up a level. Less arranging, more noticing. Less polishing every corner by hand, more understanding what the product is trying to say. The designer becomes an editor, a translator, a curator of intent. Not just someone who makes the interface look good, but someone who helps it mean something.

Codex does not remove the need for design. It reveals what the job was actually about all along. The easy part to automate is the artifact. The hard part is the choice. After codex, a designer is the person still responsible for the decision, and for how that decision feels when it reaches another human being.

My 2026 Tech Stack

Praveen Juge (hi@praveenjuge.com) — Fri, 20 Feb 2026 05:47:55 GMT

Here is the stack I am using to build Teak in 2026, from product UI to backend operations.

⚙️ Next.js - Full-stack framework
🪐 Astro - Landing pages
🎨 Tailwind CSS - Styling system
🧩 shadcn/ui - UI components
🖼️ MynaUI Icons - Icon set
✍️ Geist Sans - Typography
🌐 Vercel - Hosting and deployment
🌩️ Cloudflare Images - Image processing
🗄️ Convex - Backend and database platform
🔐 Better Auth - Authentication
💸 Polar - Payments
📧 Resend - Email delivery
📊 Vercel Analytics - Product analytics
🧪 Vitest - Testing framework
🛠️ Sentry - Error monitoring

This stack keeps Teak fast, reliable, and easy to iterate on.

Designing an AI Metadata Pipeline for a Personal Knowledge Hub

Praveen Juge (hi@praveenjuge.com) — Sun, 30 Nov 2025 14:18:58 GMT

How Teak uses a simple, predictable AI pipeline to quietly make sense of all your saved links, screenshots, notes, and files.

Teak is a personal knowledge hub. You save links, screenshots, notes, files. Teak’s job is to quietly make sense of all that. (Teak)

The way it does that is through metadata.

Not the glamorous kind. The boring kind that makes everything else possible.

Metadata as a promise

For every card in Teak, I treat metadata like a promise:

There will be a title.
There might be a short description.
There will be tags.
The shape of this data will not surprise you.

That promise is written down as a schema:

In the backend (Convex)
In the web app
In the browser extension

Same fields. Same types. Same meaning.

The AI model doesn’t get to invent new shapes. It only gets to fill in the blanks.

The simple pipeline

Most AI products hide behind magic. Teak is more like a kitchen.

For each thing you save, the pipeline is:

Scrape Grab what we can without AI: title tags, HTML, file info.
Enrich Clean it up. Normalize URLs. Strip noise. Prepare a clear input.
AI Send a single, boring request: “Given this content, return JSON in this format. Nothing else.”
Post-process Check the JSON. Trim it. Sanity-check tags. Throw away junk.
Card UI Show a card that feels “smart”, but is really just consistent.

From the user’s point of view: a rough card appears → a few seconds later, it sharpens into something useful.

Making AI boring on purpose

The hard part is not getting AI to be clever. It’s getting it to be predictable.

So I give it constraints:

A fixed schema.
A clear role (“help a designer find this later”).
Limits (“1–8 tags, all lowercase, no poetry”).

Then I add guardrails:

If the JSON is broken, I ignore it.
If the AI title is worse than the original, I keep the original.
If tags are nonsense, I hide them instead of forcing them.

The result is an AI system that feels calm:

The UI rarely breaks.
Filters work because tags are stable.
You can design around the behavior and trust it.

In the end, “AI metadata pipeline” sounds complex. But the idea is simple:

One contract for metadata.
One pipeline that respects it.
One boring AI that behaves well enough for you to build a beautiful product on top.

Raise Your First Pull Request as a Designer

Praveen Juge (hi@praveenjuge.com) — Sun, 02 Nov 2025 00:00:00 GMT

A step-by-step guide for designers to ship a focused, review-friendly pull request without becoming a developer.

You don’t need to “become a developer” to open a good pull request. You just need a tiny, focused change and a clear story.

Pick a tiny win

Ship something you can finish today:

Swap hard-coded values for tokens (spacing, color, radius).
Add/standardize states (hover, focus, disabled, loading).
Fix copy via i18n keys.
Clean up an empty state component.

Small scope keeps the diff readable and review friendly.

Branch + title

Branch: feat/ui-empty-state-invoices or fix/tokens-modal-spacing
Title (area + intent): feat(ui): consistent focus ring across buttons

Clear names help teammates scan and trust your change.

Tell a short story (paste this)

Context — What’s off? Who feels it?
Proposal — The smallest change that fixes it (and what you didn’t touch).
Evidence — Before/After (light & dark), a 10–15s GIF, Storybook link.
Verify — Exact steps/URL/flags to reproduce.
Blast radius — Files touched, tokens changed, components affected.
Rollout — Behind a flag? Any fallback?

The checklist reviewers love

Visual

Before/After screenshots (light/dark)
Edge cases (long text, error, loading)
Responsive at sm/md/lg

A11y

Contrast passes
:focus-visible ring present
Useful labels/roles (or remove redundant ones)

Tokens

No raw hex/px; use semantic tokens (fg.muted, bg.surface, space.x)

Perf/QA

No new heavy assets
Storybook story added/updated
Repro steps work on a clean checkout

What to attach

Screenshot grid: Before/After × light/dark in one image
15s GIF: keyboard nav → focus → error → loading
Links: Figma frame URL

Tiny example (tokens + focus)

// before
<button className="px-3 py-2 text-white bg-[#1a73e8] rounded-[4px]">
  Pay invoice
</button>

// after
<button
  className="
    px-space-3 py-space-2
    text-fg-on-primary bg-bg-primary
    rounded-radius-2
    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-outline
  "
>
  {t('invoices.payCta')}
</button>

Ship it

Open the pull request. Ask for one engineer and one designer to review. The goal isn’t perfect code—it’s a clear, safe change that moves the system forward. If it takes more than a day, the scope is too big. Slice it and try again.

Designing for Edge Cases Makes You a Better Designer

Praveen Juge (hi@praveenjuge.com) — Sat, 01 Nov 2025 00:00:00 GMT

Polishing happy paths is fun, but the real craft comes from exploring how your systems respond when data misbehaves.

We all know the thrill of polishing a flow until it feels slick. But the real growth happens when you zoom out and ask: what happens when the data doesn’t behave? Advanced designers live in that uncomfortable space where perfect mocks meet messy reality. Embracing edge cases isn’t a nice‑to‑have—it’s a key to systemic thinking.

Beyond the happy path

Designing a component once is easy; designing it for arbitrary inputs exposes the invisible constraints in your system. Treat long strings, empty states, or even network failure as first‑class citizens in your Figma files. It forces you to think in variables, not static pixels. Once you’ve defined how a card responds to a 60‑character title, truncates gracefully, or shows a skeleton loader, you start to see patterns that inform your entire design language.

The shortcomings of many Figma files

Even sophisticated files often skip the unsightly states. You might see components with pristine labels but no variant for when that label fails. Or flows that assume perfect connectivity without a fallback. This creates friction during handoff—engineers improvise behaviors you never specified. Advanced designers shouldn’t leave those gaps. Use Figma’s variant and property systems to model variability: error messaging, accessibility toggles, and content scaling. These aren’t “extras”; they’re part of the contract your UI makes with the user and the team.

Cultivating an edge‑case mindset

This isn’t about documenting every hypothetical. It’s about making space in your process to challenge assumptions. Ask yourself:

What happens when the API returns no results?
How does this component behave at minimum and maximum content lengths?
Does the layout accommodate translated strings or right‑to‑left languages?

You don’t need to build exhaustive matrices for everything, but having at least one divergent example per component trains your brain (and your collaborators) to think more holistically. Over time, this discipline translates into cleaner systems, fewer regressions, and designs that feel resilient, not brittle.

Designing for edge cases isn’t a chore; it’s an investment in the integrity of your work. For those of us who care about craft, that’s where the real mastery shows.

New Updates to MynaUI!

Praveen Juge (hi@praveenjuge.com) — Tue, 18 Mar 2025 20:54:05 GMT

undefined

Today, I’m thrilled to share the latest updates to MynaUI. If you’ve been following along, you’ll notice some significant changes that enhance usability and functionality. Let’s dive into what’s new!

Goodbye Early Access!

MynaUI is no longer in early access. I’ve spent a lot of time refining and adding features, and I believe it’s now fully ready for prime time. This transition marks a new chapter for MynaUI, and I couldn’t be more excited.

One of the major updates is the addition of a sidebar for all components and elements. This new feature makes navigation easier and more intuitive.

Moving to Tailwind 4

I’ve updated all components to Tailwind 4, bringing better performance and more customization options.

Shifting to the Shad New York Theme

MynaUI now features the Shad New York theme, offering a sleek, modern design that enhances the interface’s look and feel.

React Updates

MynaUI is updated to the latest version of React, ensuring smooth and efficient performance.

New Icons on the Horizon

I’m excited to announce that I’ll be adding a variety of new icons that many of you have been requesting.

More Components Coming Soon

After the icons, I’ll be adding more components, focusing on marketing and application components.

Visual Changes: A New Color Palette

The updated color palette transitions to a more neutral scheme, aligning with the Shad New York theme.

Updated Color System

All colors in MynaUI have been updated to OKLCH for enhanced color accuracy and consistency.

New Components to Explore

Several new components have been added, including new badge and button components.

Feedback Welcome!

Your feedback is invaluable. Submit requests directly through the platform, and I’ll do my best to accommodate them.

Conclusion

That wraps up the latest updates to MynaUI! Be sure to check out the new sidebar, explore the updated components, and keep an eye out for the upcoming icons and additional features. Have fun experimenting with MynaUI, and as always, happy coding!

Embrace Your Craft Daily

Praveen Juge (hi@praveenjuge.com) — Thu, 13 Feb 2025 12:37:47 GMT

Every day is a chance to improve your skills, even if you only have 10 minutes. I block out time on my calendar for a quick design session, just like I would for a meeting.

Start small by sketching one idea or creating a simple graphic. These small projects help build the habit without feeling overwhelming.

Don’t stress about perfection; treat each piece as a practice attempt. Mistakes are just steps toward learning what works and what doesn’t.

Make creative time a regular part of your routine, like your morning coffee. When it becomes routine, you’ll find it easier to overcome creative blocks.

Share your work with friends or on social media to get real feedback. Honest opinions from real people help guide your improvements.

Keep a folder or journal of your daily designs. Looking back at your work lets you see your progress and spot trends in your style.

Consistency is key; even a little daily effort builds creative muscle over time. Just like exercising strengthens your body, regular practice strengthens your design skills.

Turn off distractions and focus on your craft for those few minutes each day. A quiet, dedicated space can make a big difference in your productivity.

Start today and commit to the habit of daily design practice. Every small step moves you closer to mastering your craft.

Top 10 Fonts for UI Design That I Love

Praveen Juge (hi@praveenjuge.com) — Sat, 04 Jan 2025 00:00:00 GMT

You know how fonts can make or break a design, right? They set the mood, deliver the message, and make things pop. I’ve tried a bunch of them over the years, and these are my go-to picks. They’re reliable, stylish, and just fun to use. Let’s jump in!

10. ZCOOL QingKe HuangYou

Okay, this one’s a mouthful to say, but it’s awesome. It’s got this futuristic vibe that’s perfect for techy landing pages or anything enterprise-y. If you’re going for that “cutting-edge” look, this is the one.

9. Handjet

Handjet is super retro and just plain cool. I use it on posters and tech-themed designs. The uppercase letters all being the same height make it stand out—perfect for banners, landing pages, and apps where you want to go bold.

8. Shantell Sans

This one’s got personality without being over-the-top. It’s kind of handwritten but polished. I use it for landing pages and banners when I want to add a little warmth. It’s not great for mobile or web apps, but for posters? Gold.

7. Just Another Hand

If you want even more of that handwritten vibe, this is your font. It’s playful and perfect for kid-friendly designs, posters, and banners. Whenever I’m doing something fun or casual, this one’s a lifesaver.

6. SN Pro

This one’s a gem. It’s like a friendlier version of Apple’s SF Pro Rounded. SN Pro has this rounded, calming feel—great for anything that needs to look approachable but not childish. Think soft but professional.

5. JARO

Bold and edgy, JARO is amazing for grabbing attention. I use it for landing pages and posters when I need to emphasize something. It’s versatile—can swing between retro and futuristic depending on the design. Love it for banners too.

4. Instrument Serif

Everyone’s using this one lately, and for good reason. It’s got this luxurious, polished look that’s ideal for landing pages. Plus, it’s free on Google Fonts. Can’t argue with style and affordability, right?

3. Big Shoulders Display

Big, bold, and perfect for making a statement. I’ve used this in so many posters and landing pages. It commands attention and ensures the message is clear. If you want to shout something loud and proud, this is your font.

2. JetBrains Mono

For web apps and anything involving code or numbers, JetBrains Mono is unbeatable. It’s clean, easy on the eyes, and just feels right. I use it for paragraphs in apps and any place I need that monospaced charm.

1. Inter or Geist

I couldn’t pick just one, so here’s a tie! Inter and Geist are my ultimate workhorses. They’re versatile, clean, and just work everywhere—landing pages, apps, you name it. Inter’s been around on Google Fonts forever, and Geist just joined the party. Both are top-notch.

So there you have it—my top 10 fonts for UI design. Each one brings something special to the table. If you’ve got favorites I didn’t mention, hit me up. I’m always looking for cool new fonts to try. Let’s keep the font love going!

Why You Should Play the Tomb Raider Survivor Trilogy

Praveen Juge (hi@praveenjuge.com) — Tue, 17 Dec 2024 00:00:00 GMT

I recently played all three games—2013’s Tomb Raider, Rise of the Tomb Raider (2015), and Shadow of the Tomb Raider (2018)—and I’m here to convince you why these should be on your must-play list. Each game offers something unique, and together, they tell an incredible story of survival, growth, and adventure. Let’s break it down.

1. Tomb Raider (2013): Where It All Begins

Picture this: Lara is young, inexperienced, and stranded on a dangerous island after a shipwreck. You’re thrown into survival mode with her, and honestly? It’s a blast.

What Makes It Great?

Character Development: You watch Lara evolve from a scared adventurer into a confident, resourceful survivor. Her growth feels earned. You’re with her through every injury, every puzzle, and every fight.
Gameplay: It’s smooth and addictive. You get puzzle-solving, resource gathering, and combat—all balanced perfectly.
The World: The island feels alive. Exploring tombs, scavenging for supplies, and solving mysteries kept me hooked.

One of my favorite moments? Solving my first tomb puzzle after a tough battle—it felt so satisfying.

If you’re new to the series, this game is a perfect entry point. It’s easy to pick up, the story pulls you in, and you’ll finish it wanting more.

2. Rise of the Tomb Raider (2015): Bigger, Better, and More Confident

Lara’s second outing cranks everything up. The story moves to snowy Siberia, where Lara is on a quest to uncover a lost city. This time, she’s more confident, more skilled, and the stakes are higher.

What Stands Out?

Mythology and Story: The game dives into legends and myths in a way that’s both fascinating and cinematic. Lara becomes a true explorer.
Stealth and Combat: While the stealth could be better (some areas felt repetitive), the combat still delivers a solid mix of bow-and-arrow fun and creative takedowns.
Graphics: The snowy landscapes? Breathtaking. The visuals here are a major upgrade.

The game also introduces larger, open environments to explore, which I absolutely loved. There are hidden challenges, side quests, and gorgeous tombs scattered across the world. I remember getting sidetracked for hours just exploring.

If you enjoyed the first game, Rise feels like a natural evolution. It’s bigger, more refined, and adds layers to Lara’s story.

3. Shadow of the Tomb Raider (2018): The Grand Finale

This is it—the conclusion of Lara’s Survivor arc. Shadow takes you deep into the jungles of South America as Lara faces the Maya apocalypse.

Why It Works:

The Setting: The dense jungle environment is both stunning and terrifying. It’s crawling with challenges, hidden secrets, and danger at every turn.
Lara’s Journey: Lara is now fully aware of her responsibilities. She’s a confident leader and adventurer, and this game gives her story the closure it deserves.
The Culture: Exploring Maya and Incan ruins feels authentic and immersive. The developers really went all out on the cultural elements.

That said, I did feel that some gameplay mechanics started to feel repetitive—like solving puzzles that felt too familiar. But by the time I reached the finale, it didn’t matter. Seeing Lara’s transformation come full circle was worth it.

One of my most memorable moments? A stealth section where I had to blend into the environment and take out enemies one by one. It felt like being a real predator in the jungle—so intense!

Why Play the Whole Trilogy?

If you have the time, play all three. Trust me:

The Evolution of Lara: You won’t just play games; you’ll experience a character’s growth from vulnerable survivor to legendary explorer.
Great Puzzles and Exploration: The games balance combat, puzzles, and exploration beautifully. Each game has its own vibe, but they all deliver satisfying moments of discovery.
Stunning Graphics: Whether it’s the eerie island in Tomb Raider, the snowy peaks of Rise, or the dense jungles of Shadow, these games look gorgeous.

Final Thoughts: Start Your Adventure

Sure, there are moments where things feel repetitive—the trilogy doesn’t reinvent the wheel with every installment. But what it does do is offer an engaging story, fun gameplay, and a Lara Croft who feels more human than ever before.

If you haven’t played these games yet, start with the first one. It’s the easiest to get into, and once you’re hooked, you’ll want to see Lara’s journey through to the end. Plus, there’s nothing like the satisfaction of solving a tomb puzzle after hours of exploring—you’ll see what I mean.

So, dive in, and start your own Tomb Raider adventure. You won’t regret it!

What Good Developers Ask for in a Design Handoff

Praveen Juge (hi@praveenjuge.com) — Wed, 11 Dec 2024 00:00:00 GMT

Ah, the handoff phase—where my carefully crafted designs meet the developers who’ll turn them into something functional and polished. A smooth design handoff isn’t magic; it’s all about communication. Over time, I’ve noticed the best developers ask the right questions, and it makes the process much smoother.

Here’s a breakdown of what good developers usually ask for (and why):

1. Design Specifications

“Can you share the pixel dimensions, spacings, and font sizes?”

Why it’s important: Developers need precision to avoid inconsistencies. They’ll ask for:

Spacing between elements
Font styles and sizes
Button dimensions
Icon sizes

For a web project, I usually go with Tailwind Design System, it’s the most popular with developers.

2. Assets

“Do you have the icons, images, and logos exported and ready to go?”

Why it’s important: This ensures the assets match the design. They’ll clarify:

Export formats (SVG, PNG, etc.)
File naming conventions
Retina-ready versions (e.g., @2x and @3x)

Bonus: Some may ask about versions for light and dark modes.

3. Responsiveness Details

“What happens on smaller screens or larger resolutions?”

Why it’s important: A design that works perfectly on a desktop might struggle on a smartphone. They’ll ask about:

Breakpoints
Element resizing behavior
Hidden/show elements in specific views

4. Interaction Guidelines

“How should this button behave?”

Why it’s important: Developers want to know how things move and react. They’ll ask about:

Hover states
Click/tap animations
Transition durations (e.g., 0.3s fade-in)

5. Edge Cases

“What happens if a user enters an absurdly long name?”

Why it’s important: Real-life users will find ways to break things. Developers ask about:

Overflow text
Missing images
Error messages

This makes the final product feel more complete.

6. Design System Alignment

“Is this following our design system?”

Why it’s important: Developers know consistency matters. They’ll check if:

Components are reusable
Colors are from the existing palette
Typography follows the brand’s rules

7. Dependencies and Constraints

“Are there any platform limitations I should know about?”

Why it’s important: They’re realistic about what’s possible (or not) within a timeline or tech stack. They’ll flag:

API dependencies
Performance considerations
Accessibility standards

8. Localization Needs

“Will this design support multiple languages?”

Why it’s important: Developers consider global audiences. They’ll ask about:

Space for longer text in languages like German or French
Right-to-left (RTL) support for languages like Arabic

9. State Variations

“What should this look like when loading, empty, or in error?”

Why it’s important: Developers prepare for all user scenarios. They’ll ask about:

Loading spinners or placeholders
Empty states with call-to-action suggestions
Error state designs

10. Testing Considerations

“Are there any user flows or interactions we need to test extensively?”

Why it’s important: Developers ensure the design works in real-world scenarios. They’ll ask about:

Complex interactions like drag-and-drop
Key user flows that must work flawlessly
Animations that need cross-browser testing

Why This Matters

When developers ask these questions, it’s not just about making their job easier—it’s about making the whole product better. For me, it’s a chance to clarify my vision while building trust with my team.

So, if you’re a developer reading this, keep those questions coming. And if you’re a designer like me, let’s address these concerns upfront. It’ll save everyone a lot of time (and maybe a few late-night Slack messages).

Why I Switched My Website from Next.js to Astro

Praveen Juge (hi@praveenjuge.com) — Tue, 10 Dec 2024 00:00:00 GMT

I wanted to share my recent experience with astro.build. If you’re into static site generators—or even if you're just curious about how to build simple, fast websites—this one’s for you.

Astro (or Astro.js) is a relatively new kid on the block in the world of static site generators. But I’ve gotta say, it’s got some neat tricks up its sleeve. I recently revamped my personal website, praveenjuge.com, using Astro, and spoiler alert: I’m a fan.

Why Switch to Astro?

Before Astro, my site was built on Next.js, using its static build option. It worked fine, but honestly, for a simple blog and design showcase like mine, Next.js was overkill. I didn’t need a full ReactJS to download every time someone visited my site—just plain HTML and CSS would do.

I’ve dabbled with other static site generators like Hugo, Jekyll, and Middleman, but Astro caught my eye. I had used it for some client projects and loved how straightforward it was. Plus, it has some standout features that made me take the plunge:

Content Collections: With Astro, I didn’t have to manually parse Markdown files or handle syntax highlighting—it’s all baked in.
Zero JavaScript by Default: This is a big deal. My site doesn’t need JavaScript to function, so having zero js by default is a massive win.
Built-in Integrations: From prefetching links to inline stylesheets, Astro makes these tasks a breeze.

And the latest Astro v5 version has made content management even easier.

The Migration Process

Switching from Next.js to Astro took me about 3-4 hours, thanks to Astro’s simplicity and the small size of my site. Deployment was another smooth process. While I initially used GitHub Pages, I eventually moved to Cloudflare Pages for their free tier and analytics. Highly recommend it if you’re looking for a reliable deployment option.

Pros of Astro

Performance: My website size shrunk by 50% just by removing all the React/Next.js-related JavaScript. Now, it’s super lightweight and fast.
Developer Experience: The CLI wizard for creating a new project is fantastic. It’s easy to add integrations and feels very “web-native.”
Type Safety: If you love TypeScript, Astro has you covered with full type safety.
CMS Simplicity: I’ve been using Cursor as my CMS for Astro, and while it’s not a traditional CMS, it gets the job done with minimal hassle.

Cons of Astro

No tool is perfect, right? Here are a couple of areas where Astro could improve:

Prefetching Isn’t Perfect: Compared to Next.js’s Link tag, Astro’s prefetching feels a bit clunky, especially on some browsers.
More docs on Content Collections: I struggled to create web pages dynamically from images in a folder. It might be a documentation gap—or a skill issue in my side—but either way, it could be more intuitive.

Final Thoughts

For static sites, Astro gets a big thumbs up from me. It’s fast, efficient, and developer-friendly. While it’s not yet ready to take on full-fledged web apps (though it’s evolving with features like actions), it’s perfect for content-focused projects.

If you’re considering a switch—or starting a new project—give Astro a shot. You might just love it as much as I do!

How I Use ChatGPT

Praveen Juge (hi@praveenjuge.com) — Mon, 09 Dec 2024 00:00:00 GMT

Alright, let’s talk about ChatGPT. It’s basically my go-to work buddy these days. Whether I’m tackling design challenges, creating content, planning my day, or just trying to learn something new, ChatGPT’s got my back. Here’s how I use it for pretty much everything.

Designing

You know how designing can sometimes feel like you’re spinning your wheels? ChatGPT helps me keep things moving:

Improving UX: I’ll toss my Figma designs its way and ask for tips on how to make the user experience smoother. It’s like having an extra set of eyes—and a pretty smart brain—on the team.
Clarifying Briefs: Ever get one of those vague project briefs that leaves you scratching your head? I send them to ChatGPT, and it turns them into something I can actually work with.
Creative Ideas: Need inspiration for website banners, branding kits, or social media posters? ChatGPT’s brainstorming skills are chef’s kiss.

Content Creation

ChatGPT is also my partner in crime when it comes to content:

Blog Writing: Sometimes I’ll just ramble out loud, send my notes to ChatGPT, and boom—I’ve got a polished blog post (like this one!).
Presentation Prep: If I’ve got a big presentation, ChatGPT helps with everything from building the deck to practicing my delivery.
Marketing Materials: Stuck on a tagline or ad copy? ChatGPT’s there with fresh ideas.

Personal Development

I’m always trying to improve myself, and ChatGPT’s like my personal coach:

Language Learning: I’m working on my French, and ChatGPT helps me with grammar, vocab, and even pronunciation.
Accent Practice: Speaking more naturally? Yes, please. I use ChatGPT’s voice mode to practice without feeling self-conscious.
Small Talk Help: Need ideas for casual client conversations? ChatGPT’s got tips to keep things chill but professional.

Strategic Work Planning

Let’s face it—work can get overwhelming. Here’s how ChatGPT helps me stay sane:

Prioritizing Tasks: From balancing self-care to figuring out what needs to get done first, it helps me sort my day.
Project Management: Got multiple projects going? ChatGPT helps me integrate client feedback and keeps everything on track.
Negotiation Tips: Whether I’m drafting a tricky email or prepping for a meeting, ChatGPT gives me solid advice on phrasing things.

Stress Management & Communication

Sometimes, work (or life) throws curveballs. Here’s how ChatGPT helps me hit them out of the park:

Conflict Resolution: If I’m dealing with a tricky situation, ChatGPT helps me figure out fair, constructive solutions.
Breaking Down Complex Issues: Whether it’s a technical problem or a confusing email, ChatGPT simplifies things so I can handle them.

Creative Thinking & Learning

When I need to think outside the box, ChatGPT’s always there:

Brainstorming: From blog topics to storytelling angles, it helps me see things differently.
Learning Support: Got a tricky concept to grasp? ChatGPT breaks it down and makes learning feel less daunting.

Why It Works for Me

The best part about ChatGPT? It’s like having a whole team of experts on call—24/7. No judgment, no egos, just solutions. Whether I’m looking for a designer, writer, tutor, or coach, it’s there.

Honestly, it’s made my work ten times easier.

Some Good Figma Plugins — Part 1

Praveen Juge (hi@praveenjuge.com) — Sun, 08 Dec 2024 18:06:29 GMT

A list of some good Figma plugins that I use in my workflow to make my life easier.

Batch Styler

If you work with design systems, you need this in your life! I use Batch Styler almost daily, especially for bulk updates to text or color styles. It’s perfect when you want to experiment with different typefaces - imagine switching from Inter to Roboto across your entire design system in seconds. Trust me, your future self will thank you.

Styles & Variables Organizer

This one’s a game-changer for keeping your design system tidy. You know how messy things can get with styles and variables spread everywhere? This plugin helps manage everything in one place. The best part? It automatically finds and links similar values throughout your file - super handy when dealing with those legacy files we all love to hate.

Code Syntax Highlighter

Need to drop some code snippets into your mockups? This plugin is your best friend. It handles pretty much any programming language you throw at it, and switches between light and dark themes like a champ. Makes our developer handoffs look way more professional!

Fill Rule Editor

If you’re into icon work, you’ll love this one. It’s my go-to for fixing those annoying vector fill issues - you know, when your icons look perfect in Figma but break on export? This plugin lets you switch between fill rules easily, which is a lifesaver for platform-specific exports.

Noise & Texture

Last but not least - this plugin is fantastic for adding some subtle texture to your designs. No more jumping between Photoshop and Figma! The real-time preview is super helpful, and it’s perfect for those times when you need to add a bit of depth to your work. I use it all the time for background textures and grain effects.

Setup a RSS Feed with NextJS

Praveen Juge (hi@praveenjuge.com) — Sun, 13 Oct 2024 19:34:36 GMT

I recently moved my RSS feed from using a custom package to a custom route file. Here's a simple guide to help you set up your own RSS feed.

Step 1: Create a Route File

First, create a new file at blog/rss.xml/route.js and add the following code:

import { load } from "outstatic/server";
import { NextResponse } from "next/server";
import markdownToHtml from "../utils";

export const dynamic = "force-static";
const SITE_URL = "https://praveenjuge.com";
const AUTHOR_NAME = "Praveen Juge";
const AUTHOR_EMAIL = "hi@praveenjuge.com";
const FEED_ICON = `${SITE_URL}/favicon.ico`;
const FEED_SELF_LINK = `${SITE_URL}/blog/rss.xml`;
const FEED_SUBTITLE =
  "Praveen Juge is a designer and developer for everything on the web.";

const allBlogs = await (await load())
  .find({ collection: "blog" }, [
    "title",
    "pubDate",
    "description",
    "content",
    "slug",
  ])
  .sort({ pubDate: -1 })
  .toArray();

export async function GET() {
  const feed = `<feed xmlns="http://www.w3.org/2005/Atom">
		<id>${SITE_URL}/</id>
		<title>${AUTHOR_NAME}</title>
		<updated>${new Date().toISOString()}</updated>
		<author>
			<name>${AUTHOR_NAME}</name>
			<email>${AUTHOR_EMAIL}</email>
			<uri>${SITE_URL}/</uri>
		</author>
		<link rel="alternate" href="${SITE_URL}/"/>
		<link rel="self" href="${FEED_SELF_LINK}"/>
		<subtitle>${FEED_SUBTITLE}</subtitle>
		<icon>${FEED_ICON}</icon>
		<rights>${AUTHOR_NAME}</rights>
		<category term="Design"/>
		<category term="Technology"/>
		<contributor>
			<name>${AUTHOR_NAME}</name>
			<email>${AUTHOR_EMAIL}</email>
			<uri>${SITE_URL}/</uri>
		</contributor>
		${allBlogs
      .map(
        (entry) => `
			<entry>
				<title type="html">${entry.title}</title>
				<id>${SITE_URL}/blog/${entry.slug}</id>
				<link href="${SITE_URL}/blog/${entry.slug}"/>
				<updated>${new Date(entry.pubDate).toISOString()}</updated>
				<summary type="html">
					${entry.description}
				</summary>
				<content type="html">
					${markdownToHtml(entry.content)}
				</content>
				<author>
					<name>${AUTHOR_NAME}</name>
					<email>${AUTHOR_EMAIL}</email>
					<uri>${SITE_URL}/</uri>
				</author>
			</entry>`
      )
      .join("")}
	</feed>`;

  return new NextResponse(feed, {
    headers: {
      "Content-Type": "application/xml",
    },
  });
}

Step 2: Replace Variables

Make sure to replace the variables like SITE_URL, AUTHOR_NAME, and AUTHOR_EMAIL with your own information. Also, ensure the blog list is imported properly.

Step 3: You’re Done!

Now, your RSS feed is set up and will be available at /blog/rss.xml.

My 2024 Tech Stack

Praveen Juge (hi@praveenjuge.com) — Wed, 25 Sep 2024 15:58:55 GMT

While building my SaaS app, mosaicimg.com, I had to take a moment and document the tech stack I used. Here's a quick rundown of all the tools that made it happen.

⚙️ Next.JS 15 – Full Stack Framework
🎨 TailwindCSS – CSS Framework
🧩 ShadCN – UI Components
🖼️ MynaUI Icons – Icons
✍️ Geist Sans – Font
📄 Outstatic – CMS
🌐 Vercel – Deployment
🗄️ Supabase – Database
📊 Counterscale – Web Analytics
🌩️ Cloudflare – Image Processing
💸 Gumroad – Payment Processor
🔐 Clerk – Auth Provider
🧪 Playwright – Testing
🛠️ Sentry – Error Monitoring
📧 Loops – Marketing Emails

This setup has been key to making Mosaic smooth and scalable!

My Top Raycast Extensions

Praveen Juge (hi@praveenjuge.com) — Wed, 14 Aug 2024 13:41:51 GMT

If you're a Mac user like me, you probably know how valuable a good launcher can be. Enter Raycast—it's more than just a Mac launcher; it's a productivity powerhouse that makes managing your tasks and apps incredibly efficient. Today, I'm sharing some of my favorite Raycast extensions that help me streamline my workflow every day. This isn’t a ranked list—just a collection of tools I find indispensable.

1. Kill Process

Think of this as your go-to replacement for Activity Monitor. Kill Process displays all running processes, allowing you to terminate them with ease. It’s particularly handy if, like me, you’re still on an Intel Mac and have to deal with power-hungry apps like Chromium, Figma, or VS Code. This extension saves me a ton of time by letting me quickly close down processes that are slowing down my system.

2. Ulysses

As someone who does a lot of writing, Ulysses is my writing app of choice. This Raycast extension lets me open Ulysses, create new documents, and access my notes without breaking my flow. I created this extension to fit my workflow, and I’m currently working on updates to make it even more functional.

3. MynaUI Icons

This is another extension I created, designed to work with my MynaUI Icons pack. It’s perfect for quickly searching and copying icons that I use across various platforms like Canva, Figma, and VS Code. Whether I’m working on design projects or writing code, having these icons readily available is a lifesaver.

4. Coffee

Coffee is a nifty little extension that prevents your Mac from going to sleep while you’re on a call. It sits in the menu bar, and you can toggle it on whenever you need to keep your mic active. It’s a simple but effective tool, especially during those long online meetings.

5. Reminders and Apple Notes

These two extensions are must-haves if you’re embedded in the Apple ecosystem. The Reminders extension is a powerful tool for managing tasks, and the Apple Notes extension is perfect for quickly jotting down ideas. I often start my notes in Apple Notes and later transfer them to Ulysses if they’re worth expanding on.

6. Color Picker

If you work with design tools outside of Figma, the Color Picker extension is a must. I use it frequently in Canva and DaVinci Resolve to grab and use specific colors on the fly. It’s one of those small utilities that makes a big difference in my day-to-day work.

Honorable Mentions

Linear Extension: Great for managing tasks in Linear.
Clipboard History: An absolute must for managing copied text.
Change Case Extension: Quickly change the case of any text—very handy for coding or writing.

Raycast has made creating and managing extensions incredibly easy. Whether you’re looking to boost your productivity or tailor your Mac to your needs, chances are there’s already an extension for that—or you can easily create your own. That’s the magic of Raycast. Happy launching!

Exploring FreshRSS and Fly.io: A Designer's Perspective

Praveen Juge (hi@praveenjuge.com) — Sun, 23 Jun 2024 15:51:38 GMT

Today, I want to share my experience with two fantastic tools: FreshRSS and Fly.io. As a designer and not a backend nerd, these platforms have impressed me with their ease of use and outstanding UI/UX. Let's dive in!

FreshRSS: The Ultimate RSS Solution

FreshRSS is a web-based RSS reader that you can deploy anywhere using Docker. It’s free, easy to deploy, and boasts one of the best UIs for reading your favorite content. Initially, I thought the UI could use some improvement, but after using it, I realized it has the perfect balance for its purpose. The interface is dense yet scannable, making it easy to go through your RSS feeds one by one. Here are some highlights:

Keyboard Shortcuts: Navigating through feeds is a breeze.
Dark Mode: Perfect for night-time reading.
Subscription Management: Easily manage and organize your RSS feeds with labels and favorites.
Views: Multiple views for reading feeds and managing subscriptions.

FreshRSS may not have the flashiest UI, but its UX is top-notch, making it the best RSS reader I’ve used.

Fly.io: Deploy Anything, Anywhere

Fly.io is a deployment platform similar to Heroku and DigitalOcean, but with a unique twist. It offers a sleek, modern UI combined with a terminal-based approach for control, giving you the best of both worlds. Here’s how easy it is to deploy an app on Fly.io:

Create an Account: Sign up on Fly.io.
Login: Use your Mac terminal to log in.
Create a fly.toml File: Specify your Docker file, RAM, storage, and more.

Here’s an example of my fly.toml configuration for FreshRSS:

app = 'praveenjuge-freshrss'
kill_signal = 'SIGINT'
kill_timeout = '5s'

[experimental]
  auto_rollback = true

[build]
  image = 'freshrss/freshrss'

[env]
  CRON_MIN = '*/20'

[[mounts]]
  source = 'freshrss_data'
  destination = '/var/www/FreshRSS/data'

[[services]]
  protocol = 'tcp'
  internal_port = 80
  processes = ['app']

[[services.ports]]
    port = 80
    handlers = ['http']
    force_https = true

[[services.ports]]
    port = 443
    handlers = ['tls', 'http']

  [services.concurrency]
    type = 'connections'
    hard_limit = 25
    soft_limit = 20

[[services.tcp_checks]]
    interval = '15s'
    timeout = '2s'
    grace_period = '1s'

[[vm]]
  size = 'shared-cpu-1x'

After creating this file, deploying your app is as simple as running a deploy command. The combination of a clean UI and powerful terminal commands makes Fly.io an excellent choice for deploying applications.

Final Thoughts

As a designer, I prioritize good UI and UX. Fly.io has both in spades, with an intuitive interface and seamless functionality. FreshRSS, while not the flashiest, provides an excellent user experience with all the features you need in an RSS reader. Both tools have earned a place in my workflow, and I highly recommend them.

Got any thoughts? Share them with me on Twitter.

Review of Assassin's Creed Odyssey and Valhalla

Praveen Juge (hi@praveenjuge.com) — Sat, 22 Jun 2024 12:58:14 GMT

After spending over 100 hours on Assassin's Creed Odyssey and Assassin's Creed Valhalla, I have a lot to share. Historically, I've enjoyed most of the Assassin's Creed games, but these two, in particular, have left a lasting impression on me.

Assassin’s Creed Odyssey

Setting and Storyline

Assassin’s Creed Odyssey is set in ancient Greece, a setting that is both rich and immersive. The game allows you to step into the shoes of Cassandra (or Alexios, but Cassandra is canonically correct). Cassandra’s character is compelling, with her interactions with historical figures and philosophers adding depth to the storyline. The main plot revolves around her journey through Greece, reuniting with her family, and facing numerous challenges.

Despite its engaging storyline, some reviews note that the main plot can feel a bit disjointed due to the game’s massive scope. The sheer size of the world sometimes detracts from the narrative coherence, whisking players from one end of Greece to the other without much time to develop characters and relationships deeply.

Gameplay

The gameplay in Odyssey is engaging, with a variety of activities to keep you occupied. The cultist hunting is a standout feature, providing a sense of mystery and challenge as you uncover and eliminate members of the Cult of Kosmos. The combat system is robust, with a range of abilities and a leveling system that allows for customization and growth. However, the stealth mechanics felt a bit lacking. While stealth is a core aspect of the Assassin’s Creed franchise, Odyssey leans more towards direct combat, which might disappoint purists looking for a more traditional stealth experience.

Odyssey also introduces a new Mercenary system which adds an extra layer of challenge and excitement to the game. The naval combat, a beloved feature from Black Flag, allows players to engage in epic sea battles.

Graphics and Sound

One of the most breathtaking aspects of Odyssey is its graphics. The depiction of ancient Greece is stunning, with beautiful landscapes, detailed architecture, and vibrant colors that make exploration a joy. The music complements the setting perfectly, enhancing the atmosphere and immersion.

Verdict

As a story-driven gamer, I found Odyssey to be one of the better narratives in the series. Cassandra’s arc, the family dynamics, and the rich historical context all come together to create a compelling experience. Despite some shortcomings in stealth, the overall package is impressive. I would rate Assassin’s Creed Odyssey a 8 or 9 out of 10.

Assassin’s Creed Valhalla

Setting and Storyline

Valhalla takes a different approach, setting the stage in the Viking era. You play as Eivor, a Viking warrior who travels to England to establish a new settlement. The game blends historical and mythical elements, including trips to Asgard and Jotunheim, which, while interesting, sometimes felt out of place.

The story revolves around building alliances across England, with each region offering unique narratives and challenges. However, the mission structure can feel repetitive, with many tasks boiling down to raiding and pillaging, which can get monotonous over time.

Gameplay

The gameplay in Valhalla is a mix of traditional Viking raids and Assassin’s Creed’s stealth mechanics. This combination can feel a bit jarring as the two styles clash. The game’s structure revolves around building alliances across England, with each region offering unique stories and challenges. However, the repetition in missions and the overall pacing can be a bit of a drag.

Valhalla does introduce some improvements in stealth mechanics compared to Odyssey, but it still struggles to balance the Viking’s brute force with the Assassin’s finesse. The combat system is more refined, and the inclusion of settlement building adds a new strategic layer to the gameplay.

Graphics and Sound

Valhalla shines in its environmental design. From the snowy landscapes of Norway to the lush fields of England, the game is visually stunning. The sound design is equally impressive, with a score that captures the Viking spirit and enhances the immersion.

Verdict

While Valhalla has its moments, it doesn’t quite reach the heights of Odyssey for me. The clash between Viking combat and stealth, the repetitive mission structure, and the less compelling story make it less enjoyable. I would rate Assassin’s Creed Valhalla around 6 to 7 out of 10.

Final Thoughts

Both games have their strengths and weaknesses. Odyssey’s strong narrative and beautiful setting make it a standout in the series, while Valhalla’s immersive Viking world and unique blend of gameplay styles offer a different experience. If you’re a fan of story-driven games, Odyssey is the clear winner. However, if you’re looking for something different and enjoy the Viking era, Valhalla is worth a try.

Ultimately, both games are worth playing, and they offer hours of entertainment and exploration. Whether you’re sailing the Aegean Sea or raiding English monasteries, the worlds of Assassin’s Creed Odyssey and Valhalla are rich, immersive, and full of adventure. Highly recommend!

How I Start a New Figma Project Nowadays

Praveen Juge (hi@praveenjuge.com) — Tue, 18 Jun 2024 19:16:52 GMT

Today, I want to share with you how I start a new Figma project nowadays, whether it's for work or a personal endeavor. Over time, I've honed a process that revolves around a few key tools and design systems that make my workflow efficient and enjoyable. Let’s dive in!

TailwindCSS Design System: My Go-To Resource

Whenever I start a new project, I can’t imagine working without the TailwindCSS Design System. I’ve been a fan of Tailwind since its beta days, and it’s been a game-changer for me. Tailwind’s robust framework offers a comprehensive design system with everything you need: colors, variables, shadows, typography, grids, opacity, borders, and spacing.

For those of you who haven’t tried it yet, I’ve published a TailwindCSS v3.4.4 Design System on Figma Community. This resource is invaluable, and duplicating it is my first step whenever I embark on a new web project.

Getting Started with a New Figma Project

Here’s my typical workflow:

Duplicate the Design System: I start by heading over to the Figma Community and duplicating the TailwindCSS Design System. This gives me a solid foundation with pre-set styles and components.
Set Up the Project Structure: I create a new page within this file called “UI” or “Wireframes”. This page serves as my canvas for designing and iterating.
Leverage Pre-Built Design System: The design system includes a variety of pre-built components like avatars, grids, blur effects, and shadows, which I use extensively. Sticking to these predefined elements not only speeds up my design process but also fosters creativity within constraints.

ShadCN UI: The New Kid on the Block

I have also created Myna UI, a UI kit that combines TailwindCSS with ShadCN UI and Radix UI. ShadCN UI offers additional components such as buttons, dropdowns, and tooltips, which aren’t available in the standard TailwindCSS system.

Here’s why Myna UI is fantastic:

Comprehensive Theming: It includes theming options that allow for dynamic changes. For instance, modifying one primary color variable updates all associated colors, making theme adjustments seamless.
Enhanced Components: The combination of TailwindCSS and Radix UI provides a rich set of UI elements that enhance the design possibilities.

When I’m sure I’ll use ShadCN UI for a project, duplicating the Myna UI file from the Figma Community is my go-to move.

Sticking to the System

One of the key aspects of my design process is sticking to the design system. By working within the constraints of TailwindCSS or ShadCN UI, I find that my creativity flourishes. Knowing the limits of colors, sizes, and styles helps me push the boundaries of what’s possible within those parameters, leading to innovative and cohesive designs.

Conclusion

Starting a new Figma project with a solid design system not only streamlines my workflow but also ensures that the end product is both beautiful and functional. Whether you’re a seasoned designer or just starting out, I highly recommend trying out these design systems. They’ve made a world of difference in my projects, and I hope they’ll do the same for you.

Feel free to check out the resources I mentioned and let me know if you have any questions or need any changes in the TailwindCSS design system. Happy designing!

Thoughts on WWDC24

Praveen Juge (hi@praveenjuge.com) — Mon, 17 Jun 2024 18:38:47 GMT

I just finished watching the WWDC24 sessions and wanted to share my thoughts on the announcements. Here’s a quick rundown of what stood out to me, especially the things I might actually use in my daily routine.

Apple Mail Inbox Categories

First up, Apple Mail introduced inbox categories. Honestly, I’ll probably disable this feature. I don’t get enough emails in my primary inbox to need additional sorting. It seems like overkill for my needs.

New Passwords App

Now, the new passwords app is something I’m excited about. I’ve been using Apple’s Hide My Email for all my online accounts, so integrating this with a dedicated passwords app is a big win for me. I don’t use third-party apps like 1Password, so this will streamline my workflow.

iPhone Mirroring on macOS

A feature I’m thrilled about is iPhone mirroring on macOS. This is a game-changer for me. No more constantly checking my phone while I’m working on my Mac. It’s going to make multitasking so much easier.

Window Snapping in macOS

Window snapping in macOS? Probably not something I’ll use. I’ve never felt the need for it, and my current setup works just fine without it.

Swift and SwiftUI

I watched all the developer sessions relevant to me, and there were some exciting updates in Swift and SwiftUI. New animations, Swift Data features, and dynamic type support are fantastic. I’m still new to Swift, so there’s a learning curve, but the new features are promising.

AI and App Intents

The AI stuff was interesting. Apple’s making it easier for developers to integrate AI without relying on third-party providers. I’m curious to see how this plays out, especially with App Intents making app functions accessible through AI. I already have a few ideas on how to use this for my projects.

Safari and Other Updates

Safari updates didn’t bring much new. It looks pretty much the same, but I appreciate the consistency. The design guide playlist is a nice touch for yearly updates, keeping everything fresh.

ChatGPT Integration

ChatGPT integration seems like a transitional phase before Apple rolls out its proprietary solution. It’s a wait-and-see situation for me.

Vision Pro and Swift Testing

Vision Pro isn’t available in India yet, so I’ll pass on that for now. However, Swift Testing looks promising. As a developer platform, Swift keeps getting better, and I’m excited to dive into these new tools.

Final Thoughts

Overall, it was a solid WWDC. The macOS updates and developer tools, especially Xcode and SwiftUI enhancements, were the highlights for me. I can’t wait to start experimenting with all these new features.

Happy coding!

Excited for CSS Masonry Layout

Praveen Juge (hi@praveenjuge.com) — Sun, 05 May 2024 12:45:36 GMT

Everyone's talking about the upcoming updates in CSS Grid Layouts, thanks to some cool insights from WebKit and Chrome.

WebKit is working on adding masonry layouts to CSS Grid. This means we might soon get to create these layouts easily without needing JavaScript or tricky CSS.

Chrome is showing off how display: masonry works, and it’s pretty slick. It lets us manage content of different sizes in a grid without any ugly gaps. No more wrestling with the grid system to get things to line up right!

I can’t wait until display: masonry is something we can all use. It’s going to change how we design frontends by saving us a ton of time and letting us get more creative without fussing over layout issues.

It’d be even cooler if CSS could automatically figure out the best number of columns for a masonry layout by looking at the space and content size. That would make our designs adapt smoothly to different screens, making websites look awesome everywhere without extra work.

Where I look for Design Inspirations

Praveen Juge (hi@praveenjuge.com) — Tue, 05 Mar 2024 05:34:15 GMT

A list of websites where I look when I want some design inspirations.

Will update this list updated if there is something new.

One More Next.js Starter Kit

Praveen Juge (hi@praveenjuge.com) — Sat, 02 Mar 2024 04:35:22 GMT

There are, quite literally, a thousand starter kits for Next.js, with next-create-app being the top choice for many. However, when I embark on a new project, I prefer to start with as few files as possible. This approach helps me kick off new projects quickly and without any unnecessary clutter.

So, I’ve created a Next.js starter kit tailored for myself, which you can check out here.

This kit contains just 5 files but comes packed with everything you need right out of the box:

React
Next.js
TypeScript
TailwindCSS
Prettier
ESLint
Geist Font

When starting a new project, I either duplicate this template or simply copy and paste the 5 files. This method saves me the hassle of removing unwanted code from other starter kits and ensures Prettier and ESLint are configured exactly to my liking.

See it here: github.com/praveenjuge/nextjs-minimal-starter

To Use or Not to Use Auto Layout in Figma

Praveen Juge (hi@praveenjuge.com) — Fri, 01 Mar 2024 05:16:06 GMT

The debate on whether or not to use Auto Layout in Figma is a hot topic that frequently surfaces on Twitter. Based on my experience with this feature, I've developed some insights and guidelines on when and how to leverage Auto Layout to its full potential.

Here’s a breakdown, based on personal experience, of where Auto Layout shines and where it might not be the best fit:

When to Use Auto Layout:

Design Systems: Auto Layout is invaluable for creating design systems. It ensures consistency across components and layouts, making it easier to maintain and update your design system over time.
Application Design: For designing UI/UX for applications, Auto Layout can drastically reduce the time needed to create and adjust layouts. It helps in managing the spacing and alignment of elements, ensuring that your designs are both aesthetically pleasing and functionally effective.
Landing Page Content: When it comes to the content sections of landing pages, Auto Layout can help manage the flow of text, buttons, and images seamlessly.

When Not to Use Auto Layout:

Landing Page Graphics: For more graphic-intensive elements of a landing page, such as hero images or complex visual compositions, Auto Layout may not offer the flexibility needed to achieve the desired outcome. In these cases, manual adjustments might provide better control over the design.
Graphic Design: In the realm of graphic design, where designs often require a high level of creativity and flexibility, Auto Layout might restrict the designer’s ability to manipulate elements freely.
Icon Design: Similar to graphic design, designing icons often requires precise adjustments and a level of detail that Auto Layout might not support effectively.

The decision to use Auto Layout in Figma ultimately depends on the specific needs of your project and your personal design process.

All the AI Subscriptions I Have

Praveen Juge (hi@praveenjuge.com) — Thu, 15 Feb 2024 16:21:09 GMT

I recently decided to list all the subscriptions I have in Excel to determine which category is the largest. Spoiler alert: it's AI.

ChatGPT Plus
OpenAI API
Midjourney
Raycast AI
Magnific AI
Canva AI
Adobe Photoshop AI

I wonder how all of these will integrate into a single system in the future.

Why Simplicity Matters

Praveen Juge (hi@praveenjuge.com) — Tue, 23 Jan 2024 18:50:14 GMT

Simplicity in design makes technology accessible and products intuitive, focusing on user needs and usability.

This approach is not about stripping away features or reducing functionality, but rather about prioritizing usability and user needs.

In doing so, designers can create products that are not only efficient but also resonate more deeply with their audience. This resonates particularly well in the corporate world, where the balance between innovation and usability becomes a critical factor in a product’s success.

Simplicity in design is more than an aesthetic choice – it’s a fundamental principle that should guide modern design philosophy. It’s about creating products that are not only efficient and easy to use but also bring joy and ease into our increasingly complex lives.

The future of design is clear – it must be simple.

Pushing to the Front - Book Review

Praveen Juge (hi@praveenjuge.com) — Sun, 21 Jan 2024 18:23:51 GMT

As a designer, I'm always on the lookout for inspiration, not just in visuals but in words too. That's how I stumbled upon "Pushing to the Front" by Orison Swett Marden. This book, although over a century old, surprisingly resonates with the creative struggles and triumphs we face today.

Marden, who later founded Success Magazine, wrote this during the 1890s depression, aiming to inspire success in challenging times. As designers, we often face our own kind of recession - creative blocks, challenging clients, and the ever-evolving nature of design trends. Marden’s book, filled with stories of people achieving great things against the odds, is a reminder that success is possible despite these hurdles.

The book is a goldmine of wisdom, offering advice on progressing through small, consistent steps - a principle very much applicable to design projects. I found it beneficial to read it like a daily design brief: one chapter a day, with time afterwards to reflect on how its lessons apply to my work.

But what’s truly inspiring for any creative professional is the story behind the book. After losing his original manuscript in a hotel fire, Marden, with incredible resilience, began rewriting it from scratch. This act of starting over, with nothing but a nightshirt and a 25-cent notebook, is a powerful metaphor for the design process. We often have to scrap our concepts and begin anew, finding strength in our vision and determination.

Marden’s perseverance is a lesson in not giving up on our creative dreams. He rewrote not just “Pushing to the Front” but also penned “Architects of Fate” in a modest Boston room. His dedication resulted in a manuscript that caught the attention of multiple publishers, finally getting published in 1894.

For designers, “Pushing to the Front” is more than a book. It’s a source of daily inspiration, a reminder of the timeless nature of creativity, hard work, and resilience. As we navigate the world of design, where trends come and go, and projects can be as fleeting as they are fulfilling, Marden’s journey and his words stand as a testament to the enduring power of perseverance. This book isn’t just a read; it’s a daily dose of motivation, reminding us that our creative journey, much like Marden’s, is filled with limitless possibilities.

Open Source Tips

Praveen Juge (hi@praveenjuge.com) — Sat, 20 Jan 2024 18:06:29 GMT

Imagine the open source community as a bustling city, alive with people sharing, learning, and creating together. It's an exciting place for both experienced developers and newcomers. Like any new adventure, knowing a few essential tips can make your journey smoother and more rewarding.

Think of a README file as your project’s welcoming brochure. It’s essential. This file should give a clear tour of your project, highlighting its goals and what it’s not about. Setting up a CONTRIBUTING file is like a guidebook for travelers wanting to join your journey. It ensures everyone knows the path and makes their contributions count, making the whole trip more organized and inclusive.

When coding, remember the saying, “Slow and steady wins the race.” Regular, small updates are better than rare, big changes. This keeps the project easy to handle and invites constant input from your fellow travelers. Use tools like automated testing and continuous updates – they’re like reliable travel gadgets that keep your project on track and improving.

Open source isn’t just about the code – it’s about building a friendly neighborhood. A Code of Conduct is like the rules of a clubhouse, making sure everyone feels safe and welcome. Licenses are the signs that tell others how they can use and share your project, so pick them thoughtfully.

To sum up, succeeding in the open source world is about being organized, communicating clearly, and always being ready to learn and grow.

Designing for Everyone

Praveen Juge (hi@praveenjuge.com) — Fri, 19 Jan 2024 08:08:00 GMT

In today's digital age, it's important to design websites and apps that everyone can use. Inclusive design is about making sure that all sorts of people, including those with different abilities, can have a good experience when they use these digital platforms.

Here’s what inclusive design is all about:

Equal Experience for All: Whether someone is using a smartphone, a computer, or special technology to help them, the website or app should work well for them. For instance, if there’s a picture, there should also be a text description for people who can’t see it. Or, if there’s a video, there should be captions for those who can’t hear it.
Giving Users Control: It’s important to respect how people have set up their browsers. For example, if someone likes to view things in a certain way, like with bigger text, the website shouldn’t change that. Also, it’s good to offer different ways to do things on the site. This way, people can choose the way that works best for them.

In short, inclusive design is about knowing that people use websites and apps in many different ways. By thinking about these different needs, we can make the digital world a welcoming place for everyone.

50 Days of Daily Design

Praveen Juge (hi@praveenjuge.com) — Thu, 18 Jan 2024 11:28:41 GMT

I embarked on an exciting challenge: to post a new design every day. Now, 50 days in, I've not only sharpened my skills but also doubled my Twitter following. This daily commitment, initially just an experiment, has turned into a goal to continue for at least a year.

My routine involves crafting several designs at the start of each week and then sharing them daily. These designs are a mix of work from client projects and my own ventures, like the mynaui icons and Teak. You can check these out at icons.mynaui.com and teakvault.com, respectively.

This journey has been more than just about improving my design skills; it’s been a crucial step in overcoming imposter syndrome. The rule I set for myself is simple yet transformative: regardless of how I feel about a design, it gets posted. This process of creating, sharing, and receiving feedback is a continuous learning curve.

Now, I’m venturing into daily blogging to keep my thoughts organized. I must admit, writing daily poses a different set of challenges compared to designing. But, as with design, I believe it’s a path filled with growth and learning. So here’s to more days of creating, sharing, and evolving!

Is Training Necessary for UI Design?

Praveen Juge (hi@praveenjuge.com) — Wed, 17 Jan 2024 10:55:47 GMT

I recently saw an ad for college students. It was about an expensive web design course that teaches UI design using Photoshop. This made me think: do you really need formal classes to be a designer?

People often argue about whether designers need formal training. But really, design is more about solving problems than just working with visual stuff like colors and fonts. Think about how you set up your phone screen or arrange your living room – that’s design thinking too! And many people do this kind of design in their everyday life without any formal training.

What makes you a good designer isn’t just having a degree or knowing certain tools. It’s really about being good at figuring out and creatively solving problems. Good designers turn challenges into great solutions. It’s kind of like how an architect turns a simple idea for a space into something that looks good and works well. This means anyone who’s good at solving problems can be a designer, even if they haven’t studied it in school.

Fewer, Better Features

Praveen Juge (hi@praveenjuge.com) — Tue, 16 Jan 2024 05:07:15 GMT

People gravitate towards simplicity.

Initially, a product’s simple and intuitive nature draws people in. However, as features are added, complexity creeps in, and the essence of simplicity can be lost.

This complexity often leads people back to seek simpler alternatives.

The lesson for designers is clear: maintain simplicity at the core of design.

But people want more features all the time. It’s crucial to regularly step back and view the product, asking if the added features enhance or hinder the experience.

How would you decide what feature to add next?

Far Cry 6 Review

Praveen Juge (hi@praveenjuge.com) — Fri, 12 Jan 2024 05:32:40 GMT

As a longtime fan of the series, particularly for its storytelling, I approached this game with high expectations. While it may not surpass the legendary status of Far Cry 3 in terms of its story, it certainly carves its own niche with compelling characters and a vivid, expansive world.

Story and Characters

Far Cry 6 takes us to Yara, a fictional Caribbean island under the dictatorship of Anton Castillo, played with scene-chewing brilliance by Giancarlo Esposito. The story, though not as groundbreaking as Far Cry 3, is engaging enough to keep players hooked. The real standout is Dani Rojas, the protagonist, whose journey from a disillusioned citizen to a fervent revolutionary is both relatable and inspiring. Esposito’s portrayal of Castillo, a tyrant with a vision for his country, adds depth to the narrative, making him more than just a one-dimensional villain.

World Design

The world of Yara is a breathtaking spectacle. Its massive and varied landscapes range from lush jungles to urban streets, each painted with meticulous detail. However, the game does not shy away from the repetitive elements typical of Ubisoft’s open-world games, which can be a double-edged sword for players seeking variety. The graphical beauty of Yara is undeniable, showcasing some of the best visuals in modern gaming.

Writing and Character Interactions

Where Far Cry 6 truly shines is in its writing and character interactions. The dialogues are slick, peppered with humor and emotional depth. Castillo’s character, despite his tyranny, is constantly humanized through his speeches and justifications, showcasing excellent writing. The interactions between Dani and other characters are filled with witty banter and heartfelt moments, creating a narrative that’s both entertaining and thought-provoking.

Far Cry 3

Comparing Dani Rojas to Vaas from Far Cry 3, it’s clear that while Vaas remains the series’ most iconic villain, Dani represents one of its best heroes. Their journeys and impacts on the player are different but equally memorable.

Music

The auditory experience in Far Cry 6 is another high point. The music, ranging from local tunes to action-packed scores, enhances the gameplay experience. I often found myself lingering in cars just to listen to the songs, a testament to the game’s sound design.

8/10

Far Cry 6 is a game that thrives on its character development, stunning visuals, and a world brimming with stories. While it may not have the most groundbreaking story in the franchise, it makes up for it with its detailed world and compelling characters. For those who play games for their stories, Far Cry 6 is a journey worth embarking on, a tale of tyranny, rebellion, and the spirit of revolution.

A Late Review of Folklore

Praveen Juge (hi@praveenjuge.com) — Sun, 03 Dec 2023 16:58:50 GMT

Yesterday, I watched Taylor Swift's Eras Tour Movie (for the third time), reaffirming that 'Folklore' is my favorite album. Here, I share why this album resonates so deeply with me.

The Unique Charm of Folklore

A Shift from the Norm: Taylor Swift, who we all know for her catchy pop tunes and personal stories, took a different route with “Folklore.” This album isn’t just about her life; it’s a mix of made-up stories and a few personal touches. It’s like she’s telling us tales from a magical forest in her mind.
Lyrical Genius: Taylor’s always been great with words, but “Folklore” takes it to another level. The lyrics are like vivid stories - from tales of wild adventures to the raw emotions of doctors during the pandemic. It’s storytelling at its best.
Cottagecore Vibes: The album gives off this ‘cottage in the woods’ feel. It’s all about finding peace in nature, something we all longed for when stuck indoors during the lockdowns. Taylor uses this to express her need for escape - from the pandemic chaos and the pressures of fame.

Narrative Craftsmanship

Swift’s decision to craft stories beyond her personal experiences adds depth and diversity to the album. This approach highlights her skill as a storyteller, weaving narratives that, while not autobiographical, are deeply influenced by her perspectives and experiences.

The Atmosphere of “Folklore”

From the very first listen, “Folklore” felt like stepping into a misty, otherworldly forest. The album’s overall tone was melancholic yet soothing, interspersed with moments of profound introspection and emotional rawness. Each track contributed to a cohesive narrative, creating an experience that was both deeply personal and universally relatable.

Let’s dive into each song and the emotions they evoke in me.

The Curtain Rises: “the 1”

As the opening chords of “the 1” played, I was immediately transported to a world tinged with the soft light of nostalgia. The song’s reflective lyrics about lost love and what-ifs, combined with its mellow melody, set the tone for the album. It’s like sitting by a window on a rainy day, lost in thoughts of what could have been.

Echoes of the Past: “cardigan” and “the last great american dynasty”

“cardigan” took me on a journey through the complexities of a mature love. Its haunting melody, layered with rich, poetic lyrics, felt like a warm, familiar embrace. Then, “the last great american dynasty” unfolded a story that was not mine but felt strangely personal. Swift’s storytelling prowess shone through, painting vivid pictures with her words.

The Heart of the Album: “exile” and “my tears ricochet”

“exile,” a duet with Bon Iver, struck a chord with its portrayal of a failed relationship. The contrast between Swift’s and Bon Iver’s voices added depth to the narrative of miscommunication and regret. Following this, “my tears ricochet” was a raw, emotional experience. Its haunting melody and lyrics about betrayal and loss resonated deeply, as if echoing the pain of every broken heart.

A Soothing Balm: “mirrorball” and “seven”

“mirrorball” shimmered with a vulnerability, a soft confession of one’s desire to be loved and seen. It was like watching light dance off a disco ball in a dimly lit room – mesmerizing and a little melancholic. In “seven,” there was a return to innocence, a reminiscence of childhood friendships and simplicity, offering a soothing balm to the album’s earlier intensity.

Reflective Moments: “august” and “this is me trying”

“august” felt like a fleeting summer romance, full of longing and wistfulness. Its airy melody carried the bittersweet tang of memories best left untouched. “this is me trying” was a raw acknowledgment of effort and struggle, a poignant reminder of the strength it takes to keep going.

The Twilight of the Album: “illicit affairs” and “invisible string”

“illicit affairs” was a journey into the complexities of forbidden love, its hushed tones and vivid imagery creating an intimate atmosphere. “invisible string,” on the other hand, offered a sense of serendipity and connection, a reminder that life’s tapestry is intricately woven with threads of fate.

The Final Act: “mad woman,” “epiphany,” and “betty”

“mad woman” was a fiery expression of anger and defiance, a striking contrast to the album’s earlier tranquility. In “epiphany,” there was a shift to a more somber tone, a reflection on the fragility of life. Finally, “betty” brought a sense of closure, a return to the roots with its more traditional narrative structure and harmonica-infused melody.

The Encore: “peace” and “hoax”

As the album neared its end, “peace” offered a raw, honest confession of one’s imperfections in love. And finally, “hoax” was like the last brushstroke on a canvas, a melancholic yet beautiful end to a masterful album.

Final Thoughts

“Folklore” by Taylor Swift is more than just an album; it’s a journey through the human experience. Each track is a chapter in a larger story, one of love, loss, and the bittersweet taste of life. Swift has crafted an album that resonates on a deeply personal level, inviting listeners to find pieces of their own stories within her songs. As the final notes faded, I was left with a sense of having been part of something truly magical.

Default Apps 2023

Praveen Juge (hi@praveenjuge.com) — Mon, 27 Nov 2023 08:05:42 GMT

Some of the default apps I use based on the list by this podcast https://defaults.rknight.me

📨 Mail Client: Apple Mail

📮 Mail Server: iCloud Custom Email Domain

📝 Notes: Apple Notes

✅ To-Do: Todoist

📷 Photo Shooting: iOS Camera

🎨 Photo Editing: Adobe Lightroom

📆 Calendar: Cron

📁 Cloud File Storage: iCloud

📖 RSS: NetNewsWire

🙍🏻‍♂️ Contacts: iOS Contacts

🌐 Browser: Safari

💬 Chat: WhatsApp, iMessages

🔖 Bookmarks: Raindrop.io

📑 Read It Later: Raindrop.io

📜 Word Processing: iA Writer

📈 Spreadsheets: Google Spreadsheets

📊 Presentations: Slides

🛒 Shopping Lists: Todoist

🍴 Meal Planning: N/A

💰 Budgeting and Personal Finance: N/A

📰 News: N/A

🎵 Music: Apple Music

🎤 Podcasts: Pocket Casts

🔐 Password Management: iCloud Keychain

🧑‍💻 Code Editor: VSCode

✈️ VPN: N/A

🎮 Gaming: Xbox One with Game Pass

🔎 Search: ChatGPT

🖼️ Screenshots: CleanShot X

Figma Speedruns: Watch Me Design at Lightning Speed!

Praveen Juge (hi@praveenjuge.com) — Fri, 31 Mar 2023 19:26:29 GMT

Dive into Figma speedrun videos and see awesome designs pop up super fast! Come along as I show off my love for design and Figma, and hit me up with what you wanna see on the channel.

You know how we all enjoy watching those mesmerizing speed drawing and speed art videos on YouTube, right? I mean, who doesn’t love seeing a blank canvas transform into a stunning piece of art in just a matter of minutes?

Well, I noticed that there wasn’t much content like that for Figma designs, and being a designer myself, I decided to do something about it. So, guess what? I’ve started uploading my very own Figma speedrun videos!

I’ve already added 4 videos to my channel, and I promise there are more to come! I’d really appreciate it if you could check them out and let me know what you think. Are they good? Do they inspire you to create your own designs? And most importantly, is there anything else design-related you’d like to see on the channel? I’m open to all your suggestions and ideas!

Here’s the link to my YouTube channel: https://www.youtube.com/@praveenjuge

LIKE AND SUBSCRIBE, or I will be slightly disappointed.

P.S: I don’t design that fast; all videos are 2x sped up.

If I had known AI would write commit messages, I would have stayed as a developer.

Praveen Juge (hi@praveenjuge.com) — Wed, 22 Mar 2023 19:04:12 GMT

Recently, I stumbled upon OpenCommit, a package that generates commit messages based on the files changed with GPT. Now, my skin is clearer, I walk with a brisk step, and I appreciate nature more. If this is what AI does for us, I'll welcome it with open hands.

My commit messages last week:

My commit messages now:

I’ve always admired how other people in popular open source projects and some of my peers take the time to write detailed commit messages and PR requests. In the past, I would often be impatient and write something quickly just to get it out of the way.

After transitioning to design full-time from development, the rare commits I make to my websites still don’t have any meaningful commit messages, which I didn’t mind until I had to go back to find something in the wall of commits.

But opencommit changed all that. As soon as I saw it, I went to OpenAI, got an API key, and tried it out. I have to say, I love the result! As you can see in the image above, it generates perfect commit messages, and I love it.

That’s enough of me raving about it - try it out for yourself -> github.com/di-sukharev/opencommit.

Creating a Number Badge UI Component

Praveen Juge (hi@praveenjuge.com) — Sat, 18 Dec 2021 12:37:47 GMT

We recently shipped a feature that shows the count of all the lists in Hellonext. While it seems like a simple feature it had a lot of challenges to figure out. Here is how we solved some of the frontend problems.

A number badge is just as it sounds, a number shown in a badge like UI. In our case, we are showing a badge next to the tab names that shows the number of posts in a particular view. Let’s go through the process of developing a UI for it.

Design

There are lot of ways to denote this type of UI to the user, here are some of the early ideas I had.

Displaying the number right next to the tab names seemed a little off as it’s easy to read it as a continuous text with the tab name.

I decided that the last idea would be a better solution overall. As it’s easy to understand with the context of the tab name and it has really distinctive active states, it’s easier for people to glance at it while scrolling through it and know how many items are in the current list.

As we decided on how the UI is going to look, let’s create the needed figma component for it. We have two variants here, the active and normal state. Let’s make use of figma’s variants feature and create it.

We also have different themes that people can choose and a dark mode. As our solution is not that complicated, it will easily adapt to those scenarios too.

HTML and CSS Design

Now, it’s time to create the component in code, let’s take the green theme for example. We are going to use TailwindCSS to make these components.

<span
  class="inline-flex rounded-full bg-gray-100 px-1.5 py-px font-mono text-xs font-medium text-gray-500"
>
  4
</span>

The code above will create the following UI. It has text, background and padding on the same element which works for the following normal badge variant.

But a problem comes when we go to the active variant. Here is all the colors we have:

The primary color is the color that is selected by the user so don’t have a light version of the color for the active badge’s background.

Now, we have to reduce the primary color’s opacity to denote that there is a brand background on the number badge.

For this, we have to add a decoration component inside the number badge so that it will have primary color as it’s background with reduced opacity.

The wrapping span will have relative position so that we can have an absolute positioned empty background span inside it. The order also matters here, inside the wrapper span, the background should come first and then the number span should come which is also relatively positioned.

<span
  class="text-primary relative ml-1 inline-flex rounded-full px-1.5 py-px font-mono text-xs font-medium transition"
>
  <span
    aria-hidden="true"
    class="bg-primary absolute inset-0 select-none rounded-full opacity-5 transition"
  ></span>
  <span class="relative">393</span>
</span>

This way we can easily add opacity to the background alone and we don’t need another color here to depict the light primary background color.

React Component

TailwindCSS needs to have the full class names present in our files to generate those css, so we need to have some decider functions that will help us set our variant colors.

import clsx from "clsx";

export default function NumberBadge({ number = "", variant = "light" }) {
  const setTextColor = (color) => {
    if (color === "primary") return "text-primary";
    if (color === "light") return "text-gray-600";
    if (color === "white") return "text-gray-600";
    return "text-gray-600";
  };

  const setBackgroundColor = (color) => {
    if (color === "primary") return "bg-primary opacity-5";
    if (color === "light") return "bg-gray-100";
    if (color === "white") return "bg-white border border-gray-200";
    return "bg-gray-100";
  };

  return (
    <span
      className={clsx(
        setTextColor(variant),
        "relative ml-1 inline-flex rounded-full px-1.5 py-px font-mono text-xs font-medium transition"
      )}
    >
      <span
        aria-hidden="true"
        className={clsx(
          setBackgroundColor(variant),
          "absolute inset-0 select-none rounded-full transition"
        )}
      />
      <span className="relative">{number}</span>
    </span>
  );
}

setBackgroundColor and setTextColor here will decide the color class names based on the variant that is passed through the component’s props.

Then you can use the NumberBadge component in your code.

<NumberBadge number="5" variant="light" />

Another small optimization is to use monospace font for the number so that it won’t move the layout when the number is dynamically updated.

Use Tailwind JIT with Hugo

Praveen Juge (hi@praveenjuge.com) — Sun, 06 Jun 2021 03:57:04 GMT

Tailwind released a new CLI which made JIT watch mode possible. We can use it to integrate JIT into a Hugo site. Let's see how to do that.

Just show me the repo →

Setup New Hugo Site

Let’s create a new hugo site to test on, run the following commands in your terminal:

hugo new site hugo-tailwind-jit
cd hugo-tailwind-jit

We have to add some new files for tailwind to work, so run the following command in your terminal:

touch layouts/index.html static/tailwind.css package.json tailwind.config.js

We are going to transform static/tailwind.css into static/main.css, which we will include in our hugo layout:

In layouts/index.html add the following code,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello World</title>
    <link rel="stylesheet" href="/main.css" />
  </head>
  <body>
    <h1 class="p-20 text-2xl font-bold">Hello World</h1>
  </body>
</html>

Add Tailwind

Let’s add our tailwind code, add the following code to static/tailwind.css,

@tailwind base;
@tailwind components;
@tailwind utilities;

We have to add our build scripts for Tailwind’s new CLI work for us.

In package.json add the following code,

{
  "scripts": {
    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./static/tailwind.css -o ./static/main.css -w",
    "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./static/tailwind.css -o ./static/main.css --minify"
  },
  "dependencies": {
    "tailwindcss": "^3.0.5"
  }
}

And next the basic Tailwind config, where we mention our JIT mode, and tell where to purge.

In tailwind.config.js add the following code,

module.exports = {
  content: ["./content/**/*.md", "./content/**/*.html", "./layouts/**/*.html"],
};

Install Dependencies

We only have tailwind as a dependency, install it by using the following code in your terminal:

npm install

Development Server

For Tailwind watcher, run the following code in your terminal:

npm run dev

For Hugo Server, run the following code in another terminal tab:

hugo server

And go to http://localhost:1313 to see the Tailwind JIT enabled hugo server in action.

Production Build

Our build script will minify the css while building for production, you can use the following combined script for building minified production ready code.

npm run build && hugo --minify

And don’t forget to add static/main.css to your .gitignore file. Otherwise the automatically generated css file will be pushed to your repo.

That’s it. ✨

Add all Tailwind 2 Color Palettes to your config

Praveen Juge (hi@praveenjuge.com) — Thu, 04 Feb 2021 15:40:42 GMT

Tailwind 2 has eight default color palette that you can use in your project, but internally it ships with 22 colour palettes. Here is how you can import them all. This increases your css size by a lot so make sure you purge during production build.

//tailwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      black: colors.black,
      white: colors.white,
      "blue-gray": colors.blueGray,
      "cool-gray": colors.coolGray,
      gray: colors.gray,
      "true-gray": colors.trueGray,
      "warm-gray": colors.warmGray,
      red: colors.red,
      orange: colors.orange,
      amber: colors.amber,
      yellow: colors.yellow,
      lime: colors.lime,
      green: colors.green,
      emerald: colors.emerald,
      teal: colors.teal,
      cyan: colors.cyan,
      sky: colors.sky,
      blue: colors.blue,
      indigo: colors.indigo,
      violet: colors.violet,
      purple: colors.purple,
      fuchsia: colors.fuchsia,
      pink: colors.pink,
      rose: colors.rose,
    },
  },
};

Install Tailwind on Hugo [2021]

Praveen Juge (hi@praveenjuge.com) — Tue, 19 Jan 2021 08:40:34 GMT

Hugo has come a long way. It has postcss support built-in, so we can use all the goodness that comes from it. In this article, let's see how to install TailwindCSS on Hugo.

Just show me the repo

Tested on Hugo Version 0.83.1 and Tailwind Version 2.1.2, learn how to install Hugo here.

Setup New Hugo Site

Let’s create a new empty hugo site to test on:

hugo new site hugo-tailwind
cd hugo-tailwind

Run the above command in your terminal. It will create a new folder called hugo-tailwind which will contain your new Hugo site.

Let’s create some basic layout files by using the following commands:

mkdir assets/css layouts/_default

touch layouts/index.html layouts/_default/baseof.html assets/css/main.css

In layouts/_default/baseof.html, add:

<!DOCTYPE html>
<html>
  <head>
    <title>{{ .Title }}</title>

    {{ $styles := resources.Get "css/main.css" }} {{ $styles = $styles |
    resources.PostCSS (dict "inlineImports" true) }} {{ if hugo.IsProduction }}
    {{ $styles = $styles | minify }} {{ end }}

    <link href="{{ $styles.Permalink }}" rel="stylesheet" />
  </head>

  <body>
    {{ block "main" . }}{{ end }}
  </body>
</html>

In layouts/index.html, add:

{{ define "main" }}
<h1 class="mx-auto mt-5 text-3xl">Hello from the other side!</h1>
{{ end }}

Now, let’s add tailwind.

Install Packages

Run the following command in your terminal to add a package.json file and complete the required steps.

npm init

Then install the following packages,

npm install tailwindcss@latest postcss@latest postcss-cli@latest autoprefixer@latest --save

Tailwind and Postcss Config

In the root folder, run the following code:

npx tailwindcss init -p

This will create a tailwind.config.js and postcss.config.js file.

For proper purging add the following to your tailwind.config.js file:

...
  purge: {
    enabled: process.env.HUGO_ENVIRONMENT === "production",
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
  },
...

Next, add the following to assets/css/main.css to get the sweet tailwind css on your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, if you run hugo server in your terminal, you should see this:

That’s all, tailwind css is integrated into your hugo site!

Tips to Wake up Early Everyday

Praveen Juge (hi@praveenjuge.com) — Thu, 23 Jul 2020 10:06:54 GMT

I used to struggle to wake up early, I’ll snooze, talk myself to sleep and just sleep through the alarm sometimes. But that was 5 years ago. Now I wake up at 5:30 am daily, most of the time even before the alarm.

Here are some of the tricks I used:

The magic happens at night

The only way you can wake up early is by going to bed early. Start slow, if you goto bed at 23:00, then try going to bed at 22:45 the next week, then 15 mins earlier the next week.

I go to bed by 22:00 with a book and sleep by 22:30 at the most. This is the main reason, I think, that I can wake up early. Whenever I go to bed later at night, I miss my 5:30 deadline in the morning.

Early to bed and early to rise makes a man healthy, wealthy, and wise. ~ Benjamin Franklin

No devices

I close all my devices at 21:00 and put my mobile in a shelf across the room while going to bed. This has several benefits:

No blue light before going to bed which will reduce quality of sleep
No scrolling social media in bed
I have to physically get up and cross the room to turn off the alarm in the morning

Have purpose

You should have a strong reason to wake up early, or else you will rationalize yourself to sleep in the morning. My reasons are:

I can get so much work done during the quiet hours in the morning
I feel better throughout the day if I start early
I can meditate in absolute silence

Give yourself a Reward

Reward’s work wonders to make habits, whenever you wake up early give yourself a reward that you look forward to.

It can be anything you like, one episode from your favorite TV show, coffee or even instagram. I forgot what I used to reward myself since I started so long ago. After some time you will also stop doing it for the rewards and do it just for the pleasure of waking up early.

Set up your environment for next steps

Drinking water can freshen you up very quickly, so keep a bottle of water nearby the night before.
If you are going to exercise, have the cloths and equipment ready
If you are going to work, setup the work environment the night before for easily going to flow

Whatever you do, don’t go back to the bed.

At dawn, when you have trouble getting out of bed, tell yourself: I have to go to work — as a human being. What do I have to complain of, if I’m going to do what I was born for — the things I was brought into the world to do? Or is this what I was created for? To huddle under the blankets and stay warm?

So you were born to feel “nice”? Instead of doing things and experiencing them? Don’t you see the plants, the birds, the ants and spiders and bees going about their individual tasks, putting the world in order, as best they can? And you’re not willing to do your job as a human being? Why aren’t you running to do what your nature demands?

You don’t love yourself enough. Or you’d love your nature too, and what it demands of you. ~ Marcus Aurelius, Meditations

Down to 8 Apps on My Phone

Praveen Juge (hi@praveenjuge.com) — Wed, 08 Jul 2020 02:22:50 GMT

It's been a year since I read Cal Newport's Digital Minimalism where he talks about taking back control of your time and not feeling like you need your phone attached to you all the time. Here are some steps I took to implement Digital Minimalism in my life.

The major takeaway for me was Cal Newport’s call to join the attention resistance movement.

Like most people, I don’t have the self-control to read a book if I have the opportunity to watch Netflix. So I use the following techniques to trick my brain into doing what I want even when I don’t want to do it.

Set a list of purposes for each device

Phone:

Talking, Messaging to Friends
Listening to Music and Podcasts
Manage Todo List

iPad:

Netflix, Music, Podcasts
Reading Books

MacBook:

Work (Design, Develop, Meetings, Mail)
Music
Browsing
Video Editing
Manage Todo List, Notes

PC:

Gaming

Remove all the other unneeded apps

After I set the main purpose for each device, I got into removing all the other cruft apps that I didn’t need.

Phone

I ended up with a total of 8 essential apps on my phone. I have rooted my phone, so I could remove Play Store and other unneeded apps. I installed third-party apps with APK from trusted sources which I manually update once a month.

iPad

iPad is my main entertainment device. Apart from some, I didn’t have the need to install apps that are already available in the browser.

MacBook

As my work device, it has everything I need to get into a flow, attend meetings, and collaborate with my coworkers.

Reduce screen time

Already my screen time has reduced a lot, but here are more steps I followed:

Turn off all notifications other than the ringer and alarm.
Keep your phone and iPad away from your work desk and bed.
Consolidate texting.
Set leisure activities in the real world.

Where I can improve on

Though I gain more time every day by getting rid of unnecessary apps, I seem to be spending a lot of time on video games lately which might be an effect of quarantine.

I also observed that playing games for 30 mins to an hour makes me happy. And playing for more than 4 hours a day makes me miserable.

So that’s my next target. Play games for an hour a day and then move on to the next thing.

Next Steps

Here are some steps that Cal Newport suggests which I intend to do more of:

Be bored on purpose
Be alone with my thoughts
Embrace slow media
Take long walks
Let go of the fear of missing out

You can read this page on July 2030

Praveen Juge (hi@praveenjuge.com) — Wed, 01 Jul 2020 02:22:50 GMT

Bookmark this page and come back after 10 years. You will see the same page with the same content. But what about after 50 years? After 100? Will the browser you bookmarked this page work after 100 years?

I love anything that is long-lasting. Trees, Tortoise, Hugh Hefner.

The modern web is volatile, constantly evolving, and prone to break at a thousand different points. It’s a constant challenge to support all the devices that can access web and its even more terrifying when you think about the future.

But the web has one big supporter on its side. Backward Compatibility. HTML and CSS written in 1999 can still be seen without any problem. Even JavaScript has excellent backward compatibility.

But how can we make our content last?

I came across this manifesto called Designed to Last by Jeff Huang in which he shares similar ideas. His advice was to make your build process simple and go back to HTML/CSS.

Here are the steps I’ve taken to ensure that this site works for the foreseeable future:

Two external services

Netlify and GitHub are the only services that are needed to make this site work. I’ve brought this domain and hosted the static HTML files on netlify. The layouts and the content files are stored in GitHub.

I trust both of these services to work for a long time but I have backup plans if either of these services stopped working.

Hugo for creating static pages

Hugo is a static site generator. It takes my layouts as HTML and content as Markdown and converts it into HTML format.

Hugo is available in binary format and it can be installed anywhere.
Hugo is well maintained and has big community support.
New version releases won’t break the older versions.

And most importantly, it is fast and easy to work with.

No Third Party Domains

All the files on this website are served from praveenjuge.com. The more the external domains you hit, the chances that something will break is higher. Better safe than sorry.

No Analytics

Analytics has some benefits, but 90% of analytics is just problems. My marketing brain always tells me to add some form of analytics to every website I make.

But I convinced myself to let go and removed the need to measure vanity metrics.

Self Hosted Fonts

This site uses Merriweather font which is self-hosted on this website rather than using Google Fonts. This means that I have to update it to the latest version from time to time. But that’s better than having to hit Google’s domain.

No JavaScript

I’m gonna be honest with you, I don’t like JavaScript that much. I write it all the time, I understand how it works, I even like React and other JavaScript frameworks. But it seems to be the cause of most of the bloat on the web today.

And for a blog site, I don’t see a reason to add any JavaScript.

Compressing images, checking broken links

I compress all the images before uploading it to GitHub repo so that everything stays easy to download at all network speeds.

And I use an Netlify Plugin called Checklinks to check for broken links in the build process.

And then life happens…

I get lazy. Netlify doesn’t work anymore. I’ve moved on to carpentry.

Just like that, I may forget about this website. But I don’t want that to happen. So this blog post is my commitment to make this website last for at least the next 10 years.

Go ahead and bookmark this page. Visit it after 10 years. It will work as intended and will probably look the same.

But no one can promise 50 years.

How I Overcame YouTube Addiction

Praveen Juge (hi@praveenjuge.com) — Sun, 21 Jun 2020 05:07:47 GMT

I don't use social media often, that's by design. I know if I start using it regularly, I will become addicted to it. So, imagine my surprise when on one Sunday afternoon I found out that I spent the entire day doing nothing but watching videos on YouTube.

The saddest thing is that I didn’t even remember what I was watching. It was just a clockwork for my brain at that point. Wake up, open YouTube, watch a video, continue watching videos.

I write this blog on another Sunday afternoon, almost three months after, to say that I watched YouTube for just 10 minutes this week to watch a work-related video that a colleague sent.

I’m a little proud of myself, to tell the truth.

This is a log of everything I did to overcome this addiction. If it helped me, it might help someone else too.

How and Why I Became Addicted

YouTube is a community where billions of people share their talents, interests and findings with you.

That’s the hook.

The real YouTube is a billion-dollar company where hundreds of researchers and designers manipulate an algorithm to deliver a low-quality video to you.

I thought about why I was addicted for a long time. It basically was three things,

Types of videos I watch
YouTube’s Algorithm
YouTube’s Story

Types of videos I watch

Gaming (30%)

This one was easy to justify for me, I like watching someone be good at something. Until I realized that this was a passive way of thinking about it.

I’m not raising my skill by watching this, so what’s the point? The only way I could get better at video games is to play it more, not by watching someone else play it.

Self Help (30%)

Biggest trap of them all. Productivity, Self Help, Motivational channels might seem to have a good agenda on the onset but they can’t profit if you actually improve yourself.

Most of the YouTubers in this category are good people at heart. But they know that 90% of the people watching them won’t improve anything in their life. They just like the feeling of improving themselves.

Every time you watch one of the self-help videos, your brain plays a trick on you. It makes you think that you are actually improving yourself but when in reality you are just actually watching a video that you will forget in 40 minutes.

You will come for more when that rush is over. And YouTube tells them to create more videos quickly for us to consume.

For quick reference these are the only things they will say to you from now until eternity:

Self Help YouTubers: Take care of yourself
Productivity YouTubers: Organize your life for deep work
Motivational YouTubers: Never stop the Hustle (This will lead to burnout by the way.)

Ironically most of these YouTubers recommend you to read a book.

Design and Development (20%)

I’m a professional web designer, so it’s important for me to keep up with the latest developments in my field. Of course, that’s what I told myself.

Things always change but YouTube is not a place to capture it. YouTube videos seem to be the fast-food sector of the industry. Fast to the point but not impactful and everlasting.

I’ve found that written content like

Blog Posts
Documentation
Best Practices
Newsletters
Case Studies

are often more informative and educational. They let you,

Read at your own pace
Accessible and Developer Friendly
Most of them are intended to be everlasting or updated frequently

One might argue developer tutorials are inherently good and I agree, but I usually get a better flow in my work from written tutorials.

Commentary Channels (10%)

These are mostly for entertainment, but as I distance myself from these more and more I find them to be passive entertainment.

Netflix has a collection of marvelously produced entertainment that will take my entire lifetime to watch. Why should I settle for this glut?

Pointless Internet Drama (10%)

This was the cone of shame for me, I liked reality TV, YouTubers fighting with each other and mostly pointless drama. I was thinking about why I like this, and then a quote someone said came to me,

Don’t live on someone else’s life.

I was projecting. I have a simple life with no problems. So, I liked watching other people have problems. I thought I was superior to them in some way and that made me feel good.

Of course, I was the idiot watching videos while they simply got paid and went home.

YouTube’s Algorithm

Whenever I open YouTube, it shows me a carefully chosen list of videos that interests me. It’s a combination of what I recently liked, latest videos from the creators I like, trending videos from my location, and cute animals.

It’s impossible not to click on any of these.

YouTube’s algorithm is very powerful at this point, probably the most sophisticated recommendation engine in the world. You simply can’t win it.

You can, however, not participate in its game. Some steps you can take:

Do not smash that like button on any videos.

If you want to see a video again, download it to your drive. The YouTube video can be removed, blocked, or altered but you can always have what you want.
Do not hit that bell icon.

Voluntarily having more notifications on your phone is the first step to becoming mindless and have other people dictate where you spend your time.
Pause Watched History and Search History.

Again, download important videos. 98% of what you watch is not worth it and the other 2% can easily be searched again.

Clear watch history, remove previously liked videos, clear out your comments. Do not give any indication to YouTube on what you like.

I even ran a puppeteer (automated script) to remove all the videos from my recommendation but it just pops back up. The Not Interested option is not real.

Ultimately, be utilitarian on what you want.

If you want to learn How to Tie a Tie, search for it, learn it and close it. Don’t needlessly subscribe, like or engage in any way.

YouTube’s Story

A brand’s story is what you want other people to tell about your brand. YouTube’s story is,

YouTube is a community of people giving free information and entertainment.

YouTube is not a community.

Individual creators may create a community. But YouTube is a company that wants nothing but profits.
YouTube is not free.

Nothing Google does is free.
YouTube gives low-quality information and entertainment.

Only 5% of its millions of videos are actually helpful. Don’t take that burden of sifting through all that to find something you might like.

How I Overcame YouTube

Here are some simple and actionable steps that I took over the months,

Cancelling YouTube Premium

If you get pissed off at the ads like I do, then it’s good. You will quit the video soon.
Turn off notifications

Taylor Swift’s new music video is not that important to notify you. No one should have the right to disturb you anytime they want.
Reducing subscriptions

Go through your subscription list and remove anyone who you don’t need in your life anymore. I followed this and removed almost 300 subscriptions and I don’t even remember what they were now.
Uninstalling apps

YouTube is available everywhere, it doesn’t need to be on your phone or tablet. You can always watch in your mobile browser for something urgent.

Mobile apps have 30% higher engagement rate. We actively go back to an app more often than a website. That’s why everyone keeps pushing you to download their app. Don’t.
Remove all subscriptions

After some time, I naturally removed all my subscriptions, I found alternate sources to topics I was interested in. Books, Newsletters, Spotify, and Netflix was enough for me.

Tip: Subscribe to a channel called Sub with no videos to reduce the recommendations in your subscriptions tab.
Add alternate habits

My viewing hours reduced exponentially at this point. Now I opened YouTube, searched for some good creators, watched their latest video, and closed the site.

But to quit fully I knew I needed to replace YouTube time with something else. This can be a different thing for you and me. I started writing more often. The silence is great for creative thoughts and reflection.

Today, after all this, I realized that I’m not addicted to YouTube anymore. I should be careful to make sure I don’t go back to it slowly. But I have high hopes for the future.

And always remember,

Too much of anything can make you sick ~ Cheryl Cole

I Hate Figma's Empty Canvas

Praveen Juge (hi@praveenjuge.com) — Wed, 17 Jun 2020 02:03:24 GMT

Figma's empty canvas is where dreams go to die for me. That white screen had stopped me from starting my work more than anything else.

Every project I start, starts with the problem of facing an empty canvas. That blank white screens that stare at me.

Thousands of thoughts run through my head,

How will the end design look like?
How will people react to it when they see it?
Will it be good enough to post on Dribbble?
What if no one understands it?

While these are important questions to ask, these are the dialogues that will stop you from completing anything.

Ask these questions at the end.

Always be stupid and just start your work without thinking. You will always have time to improve anything.

For me, adding the first object is the hardest part.

My advice for beginners and to myself is to start with something, add the first stroke, add the first text, add the first rectangle. Then, slowly, you go into a flow state where you forget about the difficulty of the situation and just get things done.

You should face adversity head-on and you will always find that it is 10x times easier than you imagined.

VINCENT VAN GOGH: The blank canvas by Zen Pencils

Many painters are afraid of the blank canvas, but the blank canvas is afraid of the truly passionate painter who dares-and who has once broken the spell of ‘you can’t.’ ~ Vincent Van Gogh

Reminder to myself: Come back and read this whenever I start something new.

Books I Love - The War of Art by Steven Pressfield

Praveen Juge (hi@praveenjuge.com) — Tue, 09 Jun 2020 06:57:23 GMT

The War of Art is one of my favorite non-fiction book, it helped me recognize why I put off doing my work and how to fix it easily. I recommend this book to anyone doing creative work where you often second guess yourself and don't ship things.

Rating: 10/10, would definitely read again.

This book is written by Steven Pressfield who is an author of both fiction and non-fiction works. After reading this book, out of curiosity, I read his fiction works like Gates of Fire which delivers spectacularly on the grit and discipline of the Spartan warriors.

Book Summary

It’s not the writing part that’s hard. What’s hard is sitting down to write.

This book is a quick read on why we put off doing our work and how to procrastinate less. Pressfield expresses these by telling us about his own problems while writing his books and how he overcomes them. This will be a good read for anyone who has a creative pursuit but can’t seem to fill the gap of becoming a pro.

The War of Art is divided into three parts,

Defining our enemy, Resistance
Dealing with Resistance by Turning Pro
Beyond Resistance, the self

My Notes

Resistance

Pressfield uses the term Resistance to label the thing that distracts and prevents anyone from doing their work. He argues that Resistance comes to us whenever we attempt to improve our long-term growth, health, or integrity.

What keeps us from sitting down (to do our work) is Resistance.

Resistance cannot be seen, touched, heard, or smelled. But it can be felt. We experience it as an energy field radiating from a work-in-potential. It’s a repelling force. It’s negative. Its aim is to shove us away, distract us, prevent us from doing our work.

Resistance is Invisible
Resistance is Infallible
Resistance Creates Self-Doubt
Resistance Never Sleeps
Resistance Causes Procrastination
Resistance Creates Unhappiness

Resistance never goes away, even if you complete one project, it comes to the next one with twice as much strength.

There is however one thing we can do to deal with resistance, turning pro.

Turning Pro

Here are the characteristics of a professional:

The amateur plays for fun. The professional plays for keeps.
To the amateur, the game is his avocation. To the pro it’s his vocation.
The amateur plays part-time, the professional full-time.
The amateur is a weekend warrior. The professional is there seven days a week.

Someone once asked Somerset Maugham if he wrote on a schedule or only when struck by inspiration. “I write only when inspiration strikes,” he replied. “Fortunately it strikes every morning at nine o’clock sharp.” That’s a pro.

Some qualities that define us as a professional:

We show up every day.
We show up no matter what.
We stay on the job all day.
We are committed over the long haul.
The stakes for us are high and real.
We accept remuneration for our labor.
We do not over-identify with our jobs.
We master the technique of our jobs.
We have a sense of humor about our jobs.
We receive praise or blame in the real world.

There’s no mystery to turning pro. It’s a decision brought about by an act of will. We make up our minds to view ourselves as pros and we do it. Simple as that.

Muses, Beyond Resistance

In this part, Pressfield goes to the metaphysical by using terms like muses and angels to dramatize how we get inspired to do our work. I quite like the idea of muses watching over us and calling us to do our best work. But it’s not for everyone.

When we sit down, day after day and keep grinding, something mysterious starts to happen. A process is set into motion by which, inevitably and infallibly, heaven comes to our aid. Unseen forces enlist in our cause; serendipity reinforces our purpose.

This is the other secret that real artists know and wannabe writers don’t. When we sit down each day and do our work, power concentrates around us. The Muse takes note of our dedication. She approves. We have earned favor in her sight. When we sit down and work, we become like a magnetized rod that attracts iron filings. Ideas come. Insights accrete.

Clearly, some intelligence is at work, independent of our conscious mind and yet in alliance with it, processing our material for us and alongside us.

This is why artists are modest. They know they’re not doing the work; they’re just taking dictation. It’s also why “noncreative people” hate “creative people.” Because they’re jealous. They sense that artists and writers are tapped into some grid of energy and inspiration that they themselves cannot connect with.

Of course, this is nonsense. We’re all creative. We all have the same psyche. The same everyday miracles are happening in all our heads day by day, minute by minute.

The Ego and the Self:

The Self wishes to create, to evolve. The Ego likes things just the way they are.
The Ego is that part of the psyche that believes in material existence.
The Self believes all beings are one. If I hurt you, I hurt myself.

Creative work is not a selfish act or a bid for attention on the part of the actor. It’s a gift to the world and every being in it. Don’t cheat us of your contribution. Give us what you’ve got.

How I take Notes using VS Code and GitHub

Praveen Juge (hi@praveenjuge.com) — Tue, 26 May 2020 16:07:25 GMT

I have used dozens of note-taking apps, read lots and lots of hacker news threads on how different people organize their notes and finally settled on VS Code as the editor and GitHub Repo as the storage.

Here is how I did it and let’s see what’s good and what’s bad about this setup.

GitHub Setup

I got this whole idea when GitHub made private repo free for personal use. I simply created a private repo, cloned it to local for offline access.

Now, I just have to push to the repo whenever I make a change to my files. I know it would lead to many unnecessary commits but if I want I can squash commits anytime.

Be sure to clone it locally to take notes on.

VS Code Setup

Now to the editor, I like to write my notes on markdown format cause it’s easily parsable on the web and it’s easy to write it.

I already use VS Code for development and it has a sweet markdown viewer, so we will be using that for editing the notes.

And I also use these extensions:

Code Spell Checker

markdownlint

Markdown linter is not really necessary but it does help when you are learning markdown for the first time.

Run on Save

This helps in pushing the markdown files to git whenever you save it. After installing this extention, in VS code settings.json, add this:

{
  "runOnSave.commands": [
    {
      "match": "{{ path_to_folder }}.md$",
      "command": "pushnotes",
      "runIn": "terminal"
    }
  ]
}

Here the pushnotes command executes in the terminal whenever a save occurs. And now in your bash_profile add these lines:

pushnotes() {
  cd && cd projects/notes
  now=$(date '+%A %d %m %Y %X')
  git add . -v
  git commit -a -s -v -m $now
  git push -v
}

These will push your code to GitHub with the time and date as the commit messsage. So now, whenever you save a file, you push to the repository.

Automator Setup (Only on Mac)

After some days, I noticed that starting up VS Code and going to my notes folder was taking a lot of time, precious seconds that I could spend watching Netflix.

So I made a automator script to open my notes in VS Code with a keyboard shortcut from any application.

You can reproduce it by:

Open Automator App
Create New Quick Action
Change Workflow receives current to no input in any application
Drag Run Shell Script from the sidebar to the workflow pane
Add opennotes to the text box
Now go to System Preferences > Keyboard > Shortcuts and Services in the left pane. Find the service you just created, it should be under General.
You should see add shortcut when you hover over it, I have used CMD + SHIFT + ' as my shortcut.
And finally add this code to your bash_profile to actually open VS code:

alias opennotes='cd && cd projects/notes && code .'

Pros of this setup

Offline Access
No new apps needed
Own your data
Everything is open source, no need for any unreliable branded apps.

Cons of this Setup

No mobile access, you can view GitHub on the web. But editing is not that great.
Limited to markdown, I miss notion blocks.

I love it so far…

I’ve been using this setup for 2 months and I love it so far, but I don’t know how long I can go without editing on my mobile or iPad. For now I’ve been adding tasks in Todoist and copying to my notes when I’m on my laptop.

So there are few problems, but in this moment I’m happy with this.

My 2020 Goals

Praveen Juge (hi@praveenjuge.com) — Tue, 07 Jan 2020 04:01:53 GMT

Another year, another set of goals to keep this year interesting. Last year I failed almost 70% of my goals so let's set a new record this year.

Dev Goals:

Complete the Beginner Javascript course fully with practice.
Go to intermediate levels on React and Svelte.
Keep my GitHub Profile alive with daily commits to side projects.
Create a daily habit tracker web app for personal use.

Design Goals:

Learn more about UI, UX and Illustrations with courses on Skillshare.
Keep Dribbble and Instagram alive with daily posts.
Learn other design tools such as Illustrator, Photoshop and Procreate.

Content Goals:

New blog post every two weeks.
New YouTube video every two weeks.

Let’s see how my goals go this year.

Speed up Audiobooks using Audacity Macros

Praveen Juge (hi@praveenjuge.com) — Mon, 18 Nov 2019 09:21:22 GMT

I came by an iPod Shuffle recently, it worked great but I used to listen to my audiobooks at 2x speed which the shuffle does not have. But audacity is there to help.

Step 1: Download or Update Audacity

You can download the latest version of Audacity here. Make sure it’s the latest version, I’m on a mac and at the time of writing this the latest version is 2.3.2

Step 2: Open Macros in Audacity

Once you open audacity you can go to Tools -> Macros... to open this window.

Click on New to create a new macro and give a new name to your macro.

Step 3: Add steps to your macro

On the edit steps pane, click on the Insert button. You will see another window where you can add the steps to be taken when this macro runs.

In our case, we need to speed up our audiobooks. Now you will see the option to change speed, don’t use that unless you want to hear chipmunks. Use the Change Tempo option and click on edit parameters in the same window.

Here you can increase the percentage to match with the speed you want, for 1.5x speed of the original audio, increase the percentage to 50, for 2.0x change percentage to 100. Then click on ok, you can see the step added.

By doing this, it won’t get saved anywhere, so let’s add another step. Click on insert and find the Export as MP3 step. This will make sure the contents would be exported.

Step 4: Let’s convert

If all goes well you should see something like this:

Now click on Apply Macro to: Files button below and select the files you want to convert.

When you open the files the macro would start to run and after completion, you will see the converted files in the same origin folder under a new folder name called macro-output.

Make sure you save the macro for future use. That’s all, enjoy!

Praveen Juge

I made three iOS apps and shipped them to the App Store

What the fuck is a designer after Codex?

My 2026 Tech Stack

Designing an AI Metadata Pipeline for a Personal Knowledge Hub

Metadata as a promise

The simple pipeline

Making AI boring on purpose

Raise Your First Pull Request as a Designer

Pick a tiny win

Branch + title

Tell a short story (paste this)

The checklist reviewers love

What to attach

Tiny example (tokens + focus)

Ship it

Designing for Edge Cases Makes You a Better Designer

New Updates to MynaUI!

Goodbye Early Access!

A Fresh Sidebar for Components

Moving to Tailwind 4

Shifting to the Shad New York Theme

React Updates

New Icons on the Horizon

More Components Coming Soon

Visual Changes: A New Color Palette

Updated Color System

New Components to Explore

Feedback Welcome!

Conclusion

Embrace Your Craft Daily

Top 10 Fonts for UI Design That I Love

10. ZCOOL QingKe HuangYou

9. Handjet

8. Shantell Sans

7. Just Another Hand

6. SN Pro

5. JARO

4. Instrument Serif

3. Big Shoulders Display

2. JetBrains Mono

1. Inter or Geist

Why You Should Play the Tomb Raider Survivor Trilogy

1. Tomb Raider (2013): Where It All Begins

2. Rise of the Tomb Raider (2015): Bigger, Better, and More Confident

3. Shadow of the Tomb Raider (2018): The Grand Finale

Why Play the Whole Trilogy?

Final Thoughts: Start Your Adventure

What Good Developers Ask for in a Design Handoff

1. Design Specifications

2. Assets

3. Responsiveness Details

4. Interaction Guidelines

5. Edge Cases

6. Design System Alignment

7. Dependencies and Constraints

8. Localization Needs

9. State Variations

10. Testing Considerations

Why This Matters

Why I Switched My Website from Next.js to Astro

Why Switch to Astro?

The Migration Process

Pros of Astro

Cons of Astro

Final Thoughts

How I Use ChatGPT

Designing

Content Creation

Personal Development

Strategic Work Planning

Stress Management & Communication

Creative Thinking & Learning

Why It Works for Me

Some Good Figma Plugins — Part 1

Batch Styler

Styles & Variables Organizer

Code Syntax Highlighter

Fill Rule Editor

Noise & Texture