Forem: OpenSource

To document or not to document? That is the question

OpenSource — Sat, 08 Feb 2025 12:35:27 +0000

⚠️ Warning: Contain excuses not to write documentation

Other people:
"𝘊𝘰𝘥𝘦 𝘥𝘰𝘤𝘶𝘮𝘦𝘯𝘵𝘢𝘵𝘪𝘰𝘯 𝘪𝘴 𝘢𝘯 𝘪𝘯𝘷𝘦𝘴𝘵𝘮𝘦𝘯𝘵 𝘵𝘰 𝘺𝘰𝘶𝘳 𝘧𝘶𝘵𝘶𝘳𝘦 𝘴𝘦𝘭𝘧 𝘢𝘯𝘥 𝘺𝘰𝘶𝘳 𝘵𝘦𝘢𝘮."

Me:
"𝘐𝘧 𝘺𝘰𝘶 𝘩𝘢𝘷𝘦 𝘵𝘰 𝘦𝘹𝘱𝘭𝘢𝘪𝘯, 𝘪𝘵 𝘸𝘢𝘴 𝘯𝘰𝘵 𝘤𝘭𝘦𝘢𝘳 𝘪𝘯 𝘵𝘩𝘦 𝘧𝘪𝘳𝘴𝘵 𝘱𝘭𝘢𝘤𝘦."

Instead of adding tons of comments, make the code more readable itself:

❌ 𝐃𝐎𝐍'𝐓: Add a comment to explain cryptic vars

// 𝘔𝘶𝘭𝘵𝘪𝘱𝘭𝘺 𝘱𝘳𝘪𝘤𝘦 𝘣𝘺 𝘲𝘶𝘢𝘯𝘵𝘪𝘵𝘺 𝘵𝘰 𝘨𝘦𝘵 𝘵𝘰𝘵𝘢𝘭 𝘤𝘰𝘴𝘵
𝘭𝘦𝘵 𝘹 = 𝘺 * 𝘻;

✅ 𝐃𝐎: Change var names to make them clearer

𝘭𝘦𝘵 𝘵𝘰𝘵𝘢𝘭𝘊𝘰𝘴𝘵 = 𝘱𝘳𝘪𝘤𝘦 * 𝘲𝘶𝘢𝘯𝘵𝘪𝘵𝘺;

❌ 𝐃𝐎𝐍'𝐓: Explain logic with a comment

// 𝘊𝘩𝘦𝘤𝘬 𝘪𝘧 𝘵𝘩𝘦 𝘶𝘴𝘦𝘳 𝘪𝘴 𝘢𝘯 𝘢𝘥𝘮𝘪𝘯 𝘢𝘯𝘥 𝘩𝘢𝘴 𝘱𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯
𝘪𝘧 (𝘶 === 1 && 𝘱 > 3) { 
 𝘳𝘶𝘯();
}

✅ 𝐃𝐎: Change variables and function names

𝘭𝘦𝘵 𝘪𝘴𝘈𝘥𝘮𝘪𝘯 = 𝘶𝘴𝘦𝘳𝘙𝘰𝘭𝘦 === '𝘢𝘥𝘮𝘪𝘯';
𝘭𝘦𝘵 𝘩𝘢𝘴𝘗𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯 = 𝘱𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯𝘓𝘦𝘷𝘦𝘭 > 3;

𝘪𝘧 (𝘪𝘴𝘈𝘥𝘮𝘪𝘯 && 𝘩𝘢𝘴𝘗𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯) { 
 𝘨𝘳𝘢𝘯𝘵𝘈𝘤𝘤𝘦𝘴𝘴(); 
}

Last:
Practice reading code, not documentation.

DRY: Don't repeat yourself
If your code is clear, there's no reason to repeat what it says.

Imagine this:

// 𝘔𝘶𝘭𝘵𝘪𝘱𝘭𝘺 𝘱𝘳𝘪𝘤𝘦 𝘣𝘺 𝘲𝘶𝘢𝘯𝘵𝘪𝘵𝘺 𝘵𝘰 𝘨𝘦𝘵 𝘵𝘰𝘵𝘢𝘭 𝘤𝘰𝘴𝘵
𝘭𝘦𝘵 𝘵𝘰𝘵𝘢𝘭𝘊𝘰𝘴𝘵 = 𝘱𝘳𝘪𝘤𝘦 * 𝘲𝘶𝘢𝘯𝘵𝘪𝘵𝘺;

// 𝘊𝘩𝘦𝘤𝘬 𝘪𝘧 𝘵𝘩𝘦 𝘶𝘴𝘦𝘳 𝘪𝘴 𝘢𝘯 𝘢𝘥𝘮𝘪𝘯 𝘢𝘯𝘥 𝘩𝘢𝘴 𝘱𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯
𝘭𝘦𝘵 𝘪𝘴𝘈𝘥𝘮𝘪𝘯 = 𝘶𝘴𝘦𝘳𝘙𝘰𝘭𝘦 === '𝘢𝘥𝘮𝘪𝘯';
𝘭𝘦𝘵 𝘩𝘢𝘴𝘗𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯 = 𝘱𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯𝘓𝘦𝘷𝘦𝘭 > 3;

𝘪𝘧 (𝘪𝘴𝘈𝘥𝘮𝘪𝘯 && 𝘩𝘢𝘴𝘗𝘦𝘳𝘮𝘪𝘴𝘴𝘪𝘰𝘯) { 
 𝘨𝘳𝘢𝘯𝘵𝘈𝘤𝘤𝘦𝘴𝘴(); 
}

That's ridiculous.
That's when you know your code is clear.
No explanations needed.

𝐙𝐄𝐍 𝐎𝐅 𝐏𝐘𝐓𝐇𝐎𝐍 (𝘡𝘦𝘯 𝘰𝘧 𝘌𝘷𝘦𝘳𝘺𝘵𝘩𝘪𝘯𝘨)

𝐁𝐞𝐚𝐮𝐭𝐢𝐟𝐮𝐥 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐮𝐠𝐥𝐲. 👈

𝐄𝐱𝐩𝐥𝐢𝐜𝐢𝐭 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐢𝐦𝐩𝐥𝐢𝐜𝐢𝐭. 👈

𝐒𝐢𝐦𝐩𝐥𝐞 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐜𝐨𝐦𝐩𝐥𝐞𝐱. 👈

𝐂𝐨𝐦𝐩𝐥𝐞𝐱 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐜𝐨𝐦𝐩𝐥𝐢𝐜𝐚𝐭𝐞𝐝.

𝐅𝐥𝐚𝐭 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐧𝐞𝐬𝐭𝐞𝐝.

𝐒𝐩𝐚𝐫𝐬𝐞 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐝𝐞𝐧𝐬𝐞.

𝐑𝐞𝐚𝐝𝐚𝐛𝐢𝐥𝐢𝐭𝐲 𝐜𝐨𝐮𝐧𝐭𝐬. 👈

𝐒𝐩𝐞𝐜𝐢𝐚𝐥 𝐜𝐚𝐬𝐞𝐬 𝐚𝐫𝐞𝐧'𝐭 𝐬𝐩𝐞𝐜𝐢𝐚𝐥 𝐞𝐧𝐨𝐮𝐠𝐡 𝐭𝐨 𝐛𝐫𝐞𝐚𝐤 𝐭𝐡𝐞 𝐫𝐮𝐥𝐞𝐬.

𝐀𝐥𝐭𝐡𝐨𝐮𝐠𝐡 𝐩𝐫𝐚𝐜𝐭𝐢𝐜𝐚𝐥𝐢𝐭𝐲 𝐛𝐞𝐚𝐭𝐬 𝐩𝐮𝐫𝐢𝐭𝐲.

𝐄𝐫𝐫𝐨𝐫𝐬 𝐬𝐡𝐨𝐮𝐥𝐝 𝐧𝐞𝐯𝐞𝐫 𝐩𝐚𝐬𝐬 𝐬𝐢𝐥𝐞𝐧𝐭𝐥𝐲.

𝐔𝐧𝐥𝐞𝐬𝐬 𝐞𝐱𝐩𝐥𝐢𝐜𝐢𝐭𝐥𝐲 𝐬𝐢𝐥𝐞𝐧𝐜𝐞𝐝.

𝐈𝐧 𝐭𝐡𝐞 𝐟𝐚𝐜𝐞 𝐨𝐟 𝐚𝐦𝐛𝐢𝐠𝐮𝐢𝐭𝐲, 𝐫𝐞𝐟𝐮𝐬𝐞 𝐭𝐡𝐞 𝐭𝐞𝐦𝐩𝐭𝐚𝐭𝐢𝐨𝐧 𝐭𝐨 𝐠𝐮𝐞𝐬𝐬.

𝐓𝐡𝐞𝐫𝐞 𝐬𝐡𝐨𝐮𝐥𝐝 𝐛𝐞 𝐨𝐧𝐞-- 𝐚𝐧𝐝 𝐩𝐫𝐞𝐟𝐞𝐫𝐚𝐛𝐥𝐲 𝐨𝐧𝐥𝐲 𝐨𝐧𝐞 --𝐨𝐛𝐯𝐢𝐨𝐮𝐬 𝐰𝐚𝐲 𝐭𝐨 𝐝𝐨 𝐢𝐭. 👈

𝐀𝐥𝐭𝐡𝐨𝐮𝐠𝐡 𝐭𝐡𝐚𝐭 𝐰𝐚𝐲 𝐦𝐚𝐲 𝐧𝐨𝐭 𝐛𝐞 𝐨𝐛𝐯𝐢𝐨𝐮𝐬 𝐚𝐭 𝐟𝐢𝐫𝐬𝐭 𝐮𝐧𝐥𝐞𝐬𝐬 𝐲𝐨𝐮'𝐫𝐞 𝐃𝐮𝐭𝐜𝐡.

𝐍𝐨𝐰 𝐢𝐬 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐧𝐞𝐯𝐞𝐫.

𝐀𝐥𝐭𝐡𝐨𝐮𝐠𝐡 𝐧𝐞𝐯𝐞𝐫 𝐢𝐬 𝐨𝐟𝐭𝐞𝐧 𝐛𝐞𝐭𝐭𝐞𝐫 𝐭𝐡𝐚𝐧 𝐫𝐢𝐠𝐡𝐭 𝐧𝐨𝐰.

𝐈𝐟 𝐭𝐡𝐞 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 𝐢𝐬 𝐡𝐚𝐫𝐝 𝐭𝐨 𝐞𝐱𝐩𝐥𝐚𝐢𝐧, 𝐢𝐭'𝐬 𝐚 𝐛𝐚𝐝 𝐢𝐝𝐞𝐚. 👈

𝐈𝐟 𝐭𝐡𝐞 𝐢𝐦𝐩𝐥𝐞𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 𝐢𝐬 𝐞𝐚𝐬𝐲 𝐭𝐨 𝐞𝐱𝐩𝐥𝐚𝐢𝐧, 𝐢𝐭 𝐦𝐚𝐲 𝐛𝐞 𝐚 𝐠𝐨𝐨𝐝 𝐢𝐝𝐞𝐚.

𝐍𝐚𝐦𝐞𝐬𝐩𝐚𝐜𝐞𝐬 𝐚𝐫𝐞 𝐨𝐧𝐞 𝐡𝐨𝐧𝐤𝐢𝐧𝐠 𝐠𝐫𝐞𝐚𝐭 𝐢𝐝𝐞𝐚 – 𝐥𝐞𝐭'𝐬 𝐝𝐨 𝐦𝐨𝐫𝐞 𝐨𝐟 𝐭𝐡𝐨𝐬𝐞! 👈

Don’t Forget the Simple Stuff: The Easiest Way of Making a Dropdown is PURE HTML

OpenSource — Mon, 27 Jan 2025 12:04:01 +0000

We all love our frameworks—React, Vue, Svelte—and for good reason. They turn messy code into elegant components, manage tricky state, and give us tools to build large-scale apps fast.

But sometimes, in our excitement to drop the next npm install, we forget the basics: HTML and Vanilla JavaScript can handle a surprising amount of everyday functionality.

Consider a simple dropdown

Many devs think they need a UI library like Bootstrap or Shadcn for interactive components like dropdowns. Or they’ll create their own React component with props, states, and a mini state machine.

But there’s a native HTML solution: <details> and <summary>. That’s right, one tag handles toggling, display, and accessibility behind the scenes—no framework or even JavaScript required.

Check out how simple it is using html <summary> and <details> and a bit of styling:

Get a copy here.

https://share.webcrumbs.org/vJO5vP
(You can change it and I won't know)

<div class="w-[300px] bg-white rounded-lg shadow-lg">
  <details class="relative">
    <summary class="cursor-pointer py-2 px-4 border border-neutral-300 rounded-md text-neutral-950">
      Select Country
    </summary>
    <ul class="absolute top-full left-0 w-full bg-white border border-neutral-300 rounded-md mt-2 z-10">
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/us.svg"
          alt="United States"
          class="object-contain w-[20px] h-[15px]"
        />
        United States
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/ca.svg"
          alt="Canada"
          class="object-contain w-[20px] h-[15px]"
        />
        Canada
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/gb.svg"
          alt="United Kingdom"
          class="object-contain w-[20px] h-[15px]"
        />
        United Kingdom
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/au.svg"
          alt="Australia"
          class="object-contain w-[20px] h-[15px]"
        />
        Australia
      </li>
    </ul>
  </details>
</div>

Here's how I got it

I went to Frontend AI and asked for a dropdown

Got the results in seconds.

This isn’t a ban on frameworks.

They make big apps maintainable and unify architectural patterns.

But next time you reach for your favorite library, do a quick check: Is there a simpler, built-in alternative?

A good check is just asking Frontend AI. If there's a simpler way, it will get it right away. Here's the link, if you want to try.

By mixing in the right HTML elements and maybe a splash of Vanilla JavaScript, you might end up with code that’s faster, smaller, and just as polished.

And less dependent on third-party libraries.

Bottom line

Frameworks rock, but sometimes you can skip the extra overhead. Embrace the power of web standards first—you might be surprised how much they can do!!

What else have you built with simple HTML and JS that other people need libraries?

Clients' Expectations Hell: tips for 2025

OpenSource — Mon, 30 Dec 2024 11:42:08 +0000

Keep tuned! There's light at the end of the t̶u̶n̶n̶e̶l̶ post.

Oh, the challenges of working with clients and their expectations

If you’ve ever worked in web development, you’ve probably heard things like, “But I’ve seen this done on that site!” or, “Why can’t it just work like that?”

My favorite:

"I want to base it off of the airbnb.com menu bar. It needs to be mobile-friendly and responsive just like the airbnb one. I also need it done in a DAY." (based on a real job request)

Managing client expectations isn't a piece of cake.

"But It’s So Simple!"

"I JUST need someone with experience to help me take this raw code and turn it into a working app with a SIMPLE UI to customize the settings."

Clients often look at a polished website and assume the features just appear. Wipe transitions between pages? Sure, let’s just add it in… no problem, right? Developers know better. Building something late in the process that wasn’t planned for is like trying to add a room to a house after it’s already built. It’s not simple.

The Never-Ending “Little Tweaks”

"Looking for someone that is reliable that can make quick changes[...] as well as to make ALL PAGES look sharp, load faster and function better than they are presently."

“Could we just add this tiny feature?” Tiny? Maybe in words, but each “little” request adds layers of complexity. “Sure, we can do it, but it’ll take time and budget,” you explain. Cue the client’s wide-eyed surprise: “Wait, it’s not free?” Oh, sweet summer child…

Fixed Price? Fixed Headache.

"This update includes a UI overhaul, an [...] API being implemented to replace our current voiceover, and a new character being rigged in the app. We are looking for a full stack developer to come on board and give a FIXED price for this job."

Let’s talk about the mythical “fixed-price” project. On paper, it sounds tidy: deliver X for Y dollars. But in reality? Every project evolves. Every. Single. Time. Trying to define everything upfront is like catching water in your hands. Developers must navigate assumptions, uncertainties, and “oh, I thought that was included” moments… all while staying sane.

Budget? What Budget?

(Intentionally left blank)

Ah, the heartbreak of the “champagne dream on a beer budget” client. They imagine custom solutions but balk at the price tag. “Why can’t this cost $10K instead of $100K?” Because building a site isn’t assembling IKEA furniture. (Spoiler: even IKEA furniture takes more effort than expected.)

The “We Need This Yesterday” Syndrome

"I also need it done in a DAY."

Unrealistic deadlines? Developers know them well. Whether it’s launching a site before Q4 or meeting a marketing campaign’s arbitrary date, clients often push timelines without realizing the corners that’ll need cutting. Hello, broken 404 pages and sleepless nights.

Communication Chaos

"Work closely with the COMMUNICATIONS AND MARKETING coordinator to GUIDE THE DEVELOPMENT TEAM in creating intuitive and user-friendly interfaces."

Let’s face it: not all developers are wordsmiths, and not all clients are tech-savvy. Miscommunication is inevitable. “I didn’t realize you needed all the images before starting…” or “Why can’t you read my mind?” It’s a classic case of two sides misunderstanding each other.

The Art of “Cheap and Fast”

"This should take you less than 20 minutes to complete."

Fast, cheap, high-quality – pick two. Yet clients often want all three. Developers are left navigating this impossible trifecta, balancing quality with the reality of timelines and budgets. Who’s ready for some creative compromises?

Freelance Frenzy

"I need someone who[...] has a lot of free time... If you can meet with me today or over the weekend that improves your chances of getting hired."

Freelancers, this one’s for you: juggling demanding clients, impossible deadlines, and tax season all while undercharging because imposter syndrome is real. Oh, and the cherry on top? Clients who think you’re available 24/7.

The “Invisible Value” Dilemma

"I'd like to be able to watch you via screen share as this work is done so I can learn."

For every hour spent debugging or optimizing, there’s a client thinking you’re watching Netflix. The behind-the-scenes magic of development often goes unnoticed, leaving developers feeling undervalued and underappreciated.

Scope Creep Strikes Again

"We have developed a CRM platform in a niche market and need to add SOME additional options and features for our customers."

Ah, scope creep – the silent killer of projects. Without firm boundaries, those “little additions” snowball into massive changes. One day you’re building a simple site, and the next, you’re managing a Frankenstein’s monster of features.

In the world of web development, managing client expectations is the mountain developers must continually climb. It’s exhausting, exasperating, and, at times, utterly baffling. Yet, we keep going because, somewhere beyond the frustration, there’s a sense of accomplishment that makes it all worth it.

Now, where did we put that coffee?

Artifact: Wireframes to Win the Day

Alright, here’s a little dev trick to deal with those vague client requests. When they’re talking in riddles, show, don’t tell.

Say there's a client with this request:

"Think of this website as a 'template' in that it will be used for many different kinds of restaurants, so the page should be content-independent (though the 'categories' of content will always be the same)."

👨‍💻 Step 1: Work smart, not hard

Head to Frontend AI, click "Ask AI" and paste the client's request in their own words.

It will immediately generate a screen for you like this:

⚠️ But wait! Don’t scare them off.
We don't wanna loose the job because the client doesn't like a color or a picture. And if it looks too finished, they might think “Job’s done, right?” Nope, not today.

🖤 Step 2: Strip it down

So ask for a low fidelity black and write wireframe:

Generate a low fidelity wireframe. Remove details. Replace texts with placeholders. Remove background and add black borders. Remove the "image-" in the image-placeholder urls. Use only black text and transparent backgrounds.

Now you’ve got this clean slate to play with:

🤝 Step 3: Let them tinker

Feeling bold? Share a link and let the client tweak it. You’ll finally know what’s rattling around in their head.

Why This Works?

Clarity: Clients stop being cryptic and start being helpful.
Control: You steer the conversation and set the boundaries.
Confidence: You look like the pro who has it all figured out.

The most important part is that now you have something more concrete to start grasping what the client really wants and can better put a price and timeline on it.

The client will also feel you're proactive and ahead of the competition for having delivered something upfront.

And just like that, you’ve got a game plan. Let the others wing it—you’ve got wireframes.

Time to show them who’s boss. 💪

Testing hell 😱. Honest question. How do you survive? What's your secret?

OpenSource — Fri, 18 Oct 2024 14:50:28 +0000

We've just spent the worst couple of hours trying to work with Jest with SVG, nanoid, ... Anything that's slightly out of the ordinary Jest won't work and we found out we were spending more time debugging Jest than debugging our code. So... please help us. How do you survive the testing hell??

Hacktoberfest is ending soon! ⏳ Tips for quick contributions

OpenSource — Thu, 17 Oct 2024 07:21:00 +0000

Hacktoberfest is Almost Over,

But There's Still Time to Make Your Mark!

Hacktoberfest is speeding to a close, but guess what? You can still contribute! If you haven't jumped in yet, now’s your chance to join the fun and showcase your coding skills. 🌟

We're offering a unique way to participate this year through Frontend AI on the Webcrumbs platform. Forget the typical pull requests—build and submit your own templates and be part of something bigger!

👉 See all and cast your vote!

How Do I Get Involved?

It's easy:

Head to tools.webcrumbs.org and fire up your creativity. Start building that perfect template using our intuitive tools.
Once you’re happy with your creation, hit the “Submit your contribution” button.
Your work will go to our team for review, and once approved, your template goes live—featuring your name as the author!

Why Should You Submit?

Besides contributing to the open-source community, we’ve got some awesome rewards waiting for the top 3 contributors:

🏅 Hacktoberfest Badge for your GitHub, LinkedIn, or CV.
🌍 A special shoutout on our website and newsletter, showcasing your contribution to the world.
🎨 A unique ring around your avatar in Frontend AI, marking you as a top contributor.

Oh, and your template will live on the platform under your name, for everyone to see and use. Pretty cool, right?

Don't Forget: The Official Hacktoberfest Badge is Up for Grabs!

Yes, that’s right! Once your template is approved, we’ll send instructions to submit a PR on our GitHub. After it's accepted, you’ll receive the official Hacktoberfest badge from Hacktoberfest.com. Two badges in one go? Heck yes!

🌟 Star our GitHub repository

Ready to Get Started?

Hacktoberfest only comes once a year, and there’s still time to be part of it. Visit tools.webcrumbs.org, craft your template, and hit Submit. Show the community what you’ve got and join us in celebrating the power of open source.

🛠️ Roll up your sleeves and start building

May the best contributors win! 🥳

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

#hacktoberfest #javascript #beginners #frontend

Good First Issue: Make your first open-source contribution

OpenSource — Mon, 07 Oct 2024 14:45:01 +0000

Hey, future open-source contributor! 👋

Contributing to open-source can be intimidating at first—especially when projects have thousands of lines of code and deep conversations on issues. But that’s why good first issues exist. They’re like a friendly invitation to dip your toes in and learn the ropes without getting lost in the weeds. Think of them as the training wheels to help you start riding.

What’s a Good First Issue, ANYWAY?

It’s not about making things easy, it’s about making them approachable. A good first issue is clearly defined, has a manageable scope, and (hopefully) comes with helpful pointers on where to begin.

It might involve fixing small bugs, improving documentation, or refactoring a bit of code—just enough to get you familiar without feeling overwhelmed. Or... building templates!

A Real Example

This year, Hacktoberfest has a new twist. Instead of diving into traditional GitHub pull requests, you can contribute templates directly through Frontend AI on the Webcrumbs platform! Just visit tools.webcrumbs.org, build a template, and hit Submit.

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

#hacktoberfest #javascript #beginners #frontend

How does it work? It’s simple:

Create Your Template: Fire up Frontend AI and build a component or layout that you think could be useful for other devs. No need for complicated setup—everything happens right in the browser.
Submit Your Work: Once your template looks polished, click Submit Your Contribution via the Hacktoberfest button.
Get Approved & Published: After a quick review, your template goes live on our platform under your name, so other developers can see (and maybe even fork) your work!

And if you’re aiming for that shiny Hacktoberfest badge, don’t worry! We’ll send you instructions on how to complete a PR to our GitHub once your template is approved.

Why Contribute?

Whether it’s fixing a tiny bug or adding a brand new feature, making your first contribution is about learning. Good first issues make it easier to:

Get familiar with new codebases.
See how project maintainers structure their repos.
Gain confidence with small, tangible contributions.

And at the end of it all, you’re officially a contributor.
Not bad, right?

Ready to Make Your First Contribution?

Head over to tools.webcrumbs.org, build something cool, and submit your first open-source template. The best way to learn is by doing, and we’re here to help every step of the way.

See you in the code! 💛

A hack to Hacktoberfest: how to win a badge faster

OpenSource — Wed, 02 Oct 2024 17:41:28 +0000

Hacktoberfest is back, and there’s a new way to join in: contribute directly through Frontend AI on the Webcrumbs platform. Here’s how to get started in just 3 minutes:

Step 1: Visit Frontend AI

Go to tools.webcrumbs.org and start building your template. You can create components, design layouts, and see real-time previews.

Step 2: Submit Your Contribution

Once your template is polished, hit the “Submit your contribution” button through the Hacktoberfest menu. Your work will be reviewed, and if approved, it’ll be live on the platform with your name as the author!

Step 3: Gain Recognition and Rewards

Top 3 contributors will get a Hacktoberfest Badge, a special mention on our website and newsletter, and a unique avatar ring in Frontend AI. Plus, your template will feature your name, giving you full credit.

Find the full guide here:

A New Way to Contribute in Hacktoberfest: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

#hacktoberfest #javascript #beginners #frontend

Ready to Join?

Head over to tools.webcrumbs.org, build something awesome, and submit it! Make sure to follow our submission guidelines and release your work under the MIT License to keep it open-source.

Happy coding, and let’s make this Hacktoberfest one to remember! 🎉

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

OpenSource — Wed, 02 Oct 2024 15:10:40 +0000

Hacktoberfest is back, and this year brings an exciting new way for developers to participate. Instead of the traditional GitHub pull requests, you can now create and submit templates directly through Frontend AI on the Webcrumbs platform. Just head over to tools.webcrumbs.org, code your template, and hit "Submit" when you’re ready!

How it works?

Jumping into Hacktoberfest through Frontend AI is simple:

Go to tools.webcrumbs.org and start building your template using Frontend AI. Polish and refine your creation until you’re happy with it.
Click “Submit your contribution” through the Hacktoberfest button.
Your submission goes straight to our team for review, and once it’s approved, your template will be published on the platform under your username!

Why participate?

Besides sharing your work with the world, there are some exciting rewards for the top 3 contributors, chosen by Webcrumbs' Discord community:

🏅 Hacktoberfest Badge for your GitHub, LinkedIn, or CV.
🌟 A special mention on our website and newsletter, sharing your work with the community.
💫 A unique ring around your avatar in Frontend AI to mark your place among top contributors.

Your template will also include your name as the author, giving you full credit for your contribution and making it easier for others to find your work.

Will I gain the official Hacktoberfest badge?

Yes! After your template is approved, you'll receive an email with instructions on how to make a PR in our repository on GitHub. Once your PR is accepted, you’ll be eligible to receive the official Hacktoberfest badge, as per the official rules, adding even more value to your contribution!

🌟 Star our GitHub repository

How to get started?

Step 1: Visit Frontend AI

Start by visiting tools.webcrumbs.org. You’ll find all the tools you need to create beautiful, functional templates—from simple components to more complex layouts.

Step 2: Create & Iterate

Let your creativity flow! Design components that showcase your skills and adhere to best practices. You can preview, tweak, and refine your work in real time until you’re ready to hit “Submit.”

Step 3: Submit Your Template

Click the “Submit your contribution” button, and voilà—you’ve just entered Hacktoberfest! Our team will review your submission, and once it’s approved, it’ll be live on our platform with your name as the author.

Step 4: Spread the Word

Share your template on social media, tag us, and let the community know you’ve joined the Webcrumbs Hacktoberfest challenge! The more buzz your template creates, the better your chances of becoming one of the top 3 contributors.

Guidelines for Submissions

To maintain quality and encourage open collaboration, all submitted templates must be released under the MIT License. This makes your work truly open source, allowing others to learn from and iterate on your template, further contributing to the community spirit.

Ready to Start?

Frontend AI makes it easy for anyone to contribute, whether you’re experienced or just starting out.

So, get started today, and let’s make Hacktoberfest a time to share what you’ve built, inspire others, and showcase the power of community.

Visit tools.webcrumbs.org, fire up Frontend AI, and show us what you’ve got! We can’t wait to see what you create.

Happy coding, and may the best contributions win! 🥳

How to start a Shadcn project from scratch

OpenSource — Mon, 23 Sep 2024 00:04:38 +0000

To set up a project from scratch using React, Tailwind CSS, and Shadcn, but without using any pre-built boilerplates like create-next-app or create-react-app, you can manually configure the setup using Webpack or other similar bundlers. Below is a guide for setting this up with Webpack:

Step 1: Initialize an npm Project

Create a new project directory and initialize a new npm project:

mkdir my-shadcn-app
cd my-shadcn-app
npm init -y

Step 2: Install React and Dependencies

Install React, ReactDOM, webpack, and webpack-dev-server:

npm install react react-dom
npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin

Step 3: Install Tailwind CSS

Install Tailwind CSS and its peer dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

This creates the tailwind.config.js file.

Step 4: Configure Webpack

Create a webpack.config.js file for configuring Webpack:

touch webpack.config.js

Inside webpack.config.js, add the following:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: './dist',
    hot: true,
  },
};

Step 5: Configure Babel

Create a .babelrc file for Babel configuration:

touch .babelrc

Inside .babelrc, add the following:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Step 6: Configure Tailwind CSS

Update your tailwind.config.js file to include the paths to your components:

`tailwind.config.js`:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Step 7: Set Up Your Project Structure

Create the necessary folders and files for your React application:

mkdir src public
touch src/index.jsx src/App.jsx src/index.css public/index.html

`public/index.html`:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Shadcn App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

`src/index.jsx`:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));

`src/App.jsx`:

import React from 'react';

const App = () => {
  return (
    <div className="p-6">
      <h1 className="text-3xl font-bold">Hello Shadcn!</h1>
    </div>
  );
};

export default App;

`src/index.css`:

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

Step 8: Install Shadcn Components

Now that you have the basic setup, install the Shadcn package and its components. Install the Shadcn CLI and Tailwind components for your React project:

npx shadcn-init

Follow the on-screen instructions to install components and generate the Shadcn library for your project.

Step 9: Update npm Scripts

Update your package.json to add a start script to run the Webpack development server:

"scripts": {
  "start": "webpack serve --open"
}

Step 10: Start the Development Server

Run the development server with:

npm start

This should open up your app in the browser, and you'll see "Hello Shadcn!" styled with Tailwind CSS. You can now continue adding Shadcn components to your React project.

(Generated with AI assistance)

What's new in Frontend AI?

OpenSource — Tue, 06 Aug 2024 16:24:42 +0000

We have been prepping up our big launch on Product Hunt (today! 🎉), and so we've added some nice features to Frontend AI ✨.

Here are our favorites:
1️⃣ Use our suggestions to generate or iterate over your component
2️⃣ Enable images (or disable and see placeholders instead)
3️⃣ See funny avatars when you ask for a component with a photo
4️⃣ Explore a range of beautiful backgrounds specially for you

Try with no login required! Support us if you enjoy it:

See us on Product Hunt

We cooked our mobile app in 1 week

OpenSource — Tue, 30 Jul 2024 16:18:45 +0000

Will you help us with your feedback?

🧡 Try our Frontend AI https://tools.webcrumbs.org/frontend-ai
💙 Discord invite: https://discord.com/invite/ZCj5hFv8xV

T-shirt Tuesday!

OpenSource — Tue, 30 Jul 2024 12:23:02 +0000

Welcome back to T-Shirt Tuesday, our weekly post inspired by the brilliant minds in our Discord Community.

Every week (that we don't miss the boat), we showcase fun and unique phrases that you'd love to see on a t-shirt.

This week's highlight features a piece of code spotted by @arindam_1729 that resonates with many developers:

if (tired) {
  coffee();
} else {
  code();
}

Now, it's your turn:

What witty or inspirational phrase would you proudly wear on a t-shirt?

Drop your suggestions in the comments below!

And ⭐ join our Discord if you haven't yet!

Forem: OpenSource

To document or not to document? That is the question

Don’t Forget the Simple Stuff: The Easiest Way of Making a Dropdown is PURE HTML

Consider a simple dropdown

Get a copy here.

Here's how I got it

Bottom line

Clients' Expectations Hell: tips for 2025

Oh, the challenges of working with clients and their expectations

"But It’s So Simple!"

The Never-Ending “Little Tweaks”

Fixed Price? Fixed Headache.

Budget? What Budget?

The “We Need This Yesterday” Syndrome

Communication Chaos

The Art of “Cheap and Fast”

Freelance Frenzy

The “Invisible Value” Dilemma

Scope Creep Strikes Again

Artifact: Wireframes to Win the Day

👨‍💻 Step 1: Work smart, not hard

🖤 Step 2: Strip it down

🤝 Step 3: Let them tinker

Why This Works?

Testing hell 😱. Honest question. How do you survive? What's your secret?

Hacktoberfest is ending soon! ⏳ Tips for quick contributions

Hacktoberfest is Almost Over,

But There's Still Time to Make Your Mark!

How Do I Get Involved?

Why Should You Submit?

Don't Forget: The Official Hacktoberfest Badge is Up for Grabs!

Ready to Get Started?

May the best contributors win! 🥳

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

Good First Issue: Make your first open-source contribution

What’s a Good First Issue, ANYWAY?

A Real Example

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

Why Contribute?

Ready to Make Your First Contribution?

A hack to Hacktoberfest: how to win a badge faster

Step 1: Visit Frontend AI

Step 2: Submit Your Contribution

Step 3: Gain Recognition and Rewards

A New Way to Contribute in Hacktoberfest: Directly at Frontend AI

OpenSource for Webcrumbs ・ Oct 2

Ready to Join?

A New Way to Contribute to Hacktoberfest 2024: Directly at Frontend AI

How it works?

Why participate?

Will I gain the official Hacktoberfest badge?

How to get started?

Step 1: Visit Frontend AI

Step 2: Create & Iterate

Step 3: Submit Your Template

Step 4: Spread the Word

Guidelines for Submissions

Ready to Start?

How to start a Shadcn project from scratch

Step 1: Initialize an npm Project

Step 2: Install React and Dependencies

Step 3: Install Tailwind CSS

Step 4: Configure Webpack

Step 5: Configure Babel

Step 6: Configure Tailwind CSS

tailwind.config.js:

Step 7: Set Up Your Project Structure

public/index.html:

src/index.jsx:

src/App.jsx:

src/index.css:

Step 8: Install Shadcn Components

Step 9: Update npm Scripts

Step 10: Start the Development Server

What's new in Frontend AI?

We cooked our mobile app in 1 week

T-shirt Tuesday!

`tailwind.config.js`:

`public/index.html`:

`src/index.jsx`:

`src/App.jsx`:

`src/index.css`: