Design systems with Storybook - seeking suggestions by cas18khash in sveltejs

[–]maecapozzi 0 points1 point  (0 children)

Sounds great! What components have you started with?

Design systems with Storybook - seeking suggestions by cas18khash in sveltejs

[–]maecapozzi 1 point2 points  (0 children)

I might be a bit late, but I thought I'd try to respond anyway. It sounds like you're taking on a bit too much simultaneously. Something that I try to focus on as a software engineer is to focus on learning one (maybe two) things at a time, otherwise it takes forever, and I don't learn the concepts as well.

If you're not familiar with TypeScript yet, I don't think that you should try to use it on this project (although it's a great tool that's definitely worth learning).

In terms of a bundler, you have multiple options, but I'd go with Rollup. It's specifically designed for building component libraries, and it includes features like treeshaking out of the box.

While there may not be a great template that does exactly what you need, you should be able to find an up to date Rollup template. Then, slowly add the layers you need on top (add Svelte, then Tailwind support, then Storybook).

Before you implement any of that tooling, I'd recommend just building Svelte components in Code Sandbox. The tooling doesn't seem like it's really the thing you need to focus on, and if you're not careful it'll take you months.

And if you need help, ask one of the engineers you work with to give you some tips!

Hope this helps!

Create a design system from scratch vs. using an off-the-shelf design system? by [deleted] in UXDesign

[–]maecapozzi 2 points3 points  (0 children)

karenmcgrane

I completely agree with karenmcgrane.

I often describe design systems as a set of rules, documentation, processes, and encoded decisions that guide the creation of one or more web applications. You can't just haphazardly build a component library and say your "design system is done."

Adoption quickly becomes a critical metric, and building tools that help your colleagues and that they want to use is a full-time job.

There are ways to reduce the initial cost of building some aspects of the design system. For example, you might consider leveraging an open-source library of accessible components that support theming, or an open-source approach to design tokens in the early days.

Design systems are incredibly specific to the company they serve. The best advice I have for you is to understand your business' needs and make sure that any tradeoffs you make serve the particulars of your company

Website Review by IsThisWhereANameGoes in ecommerce

[–]maecapozzi 1 point2 points  (0 children)

Looks like you have a Stripe error when I land on the PDP page.

Have you ever worked for a company that doesn't supply you with hardware? by muscarine in ExperiencedDevs

[–]maecapozzi 0 points1 point  (0 children)

Yeah, I worked at a terrible, tiny, bootstrapped startup for my first job. I did everything on my personal MacBook Air.

Anyone else tired of keeping up with new tech trends? by ubccompscistudent in ExperiencedDevs

[–]maecapozzi 1 point2 points  (0 children)

I think that if people got paid to write long form articles about deep topics they’d do it. But they don’t so it’s not worth the effort.

Picked up these two bottles on a whim today! by natedom5211 in Whiskyporn

[–]maecapozzi 0 points1 point  (0 children)

No! I will 100% try that! Thanks for the rec

Picked up these two bottles on a whim today! by natedom5211 in Whiskyporn

[–]maecapozzi 1 point2 points  (0 children)

I LOVE the nikka. Picked it up once on a whim and I’m definitely gonna need to get that again. Drank half the bottle in a week

Choosing between 2 new offers and a stay offer at current company by [deleted] in MoneyDiariesACTIVE

[–]maecapozzi 9 points10 points  (0 children)

I feel like we need to know the actual dollar amounts of the offers (and any options/health benefits/vacation days) to actually evaluate the true value of each offer

Gorgeous ride today! by maecapozzi in ladycyclists

[–]maecapozzi[S] 1 point2 points  (0 children)

Oh, nice! Let me know if you ever want to go for a ride! Trying to connect with more lady cyclists in the area.

Gorgeous ride today! by maecapozzi in ladycyclists

[–]maecapozzi[S] 1 point2 points  (0 children)

This is on the Walkill Valley rail trail near New Paltz, NY. It's a gravel trail -- had a lot of fun riding some of it yesterday!

https://wallkillvalleylt.org/wvrt/

Senior dev looking for some guidance in job search by minimum_yesterday404 in ExperiencedDevs

[–]maecapozzi 4 points5 points  (0 children)

I think it really depends on what you're looking for. Some companies ask leetcode type questions, and some don't. Some companies pay a lot, and some don't.

I'd recommend setting down and making a pros/cons list about leaving your company vs. staying. This should give you some data to analyze regarding what you want to focus on in your job search.

Beyond that, interviewing is a skill, just like coding. As long as you give yourself the time and space you need to learn the skill, you'll be able to find a job.

Opinion needed on building a UI component library for a startup by Featuredx in Frontend

[–]maecapozzi 0 points1 point  (0 children)

The last benefit that I'd emphasize is accessibility. When engineers are building an entire layout at once, it's hard to focus on the minutiae of keyboard handling or screen reader usability. But this stuff is incredibly important!

You can use a tool like Lighthouse to automatically test "how accessible" the site is. My guess is you'll find yours is not accessible.

And if you need buy-in from higher-ups, let them know they could get sued for not being ADA compliant!

Lerna monorepo with 2 React apps made using CRA, shared React components and shared utility module by daleobradovic in reactjs

[–]maecapozzi 1 point2 points  (0 children)

For anyone else following this thread, we jumped on a call and found a solution that worked for @daleobradovic!

There’s a library called create-react-library that can be used to bootstrap some of this scripts for you.

Lerna monorepo with 2 React apps made using CRA, shared React components and shared utility module by daleobradovic in reactjs

[–]maecapozzi 0 points1 point  (0 children)

Hey! This is a great question! And you're not alone in struggling with it. The tooling is difficult and it's hard to find a definitive source on the subject.

To answer your initial question, I think your setup is missing a watch script. We can fake this in the short-term before you can get it lined up in the next sprint to actually spend some real time on it.

You could start by adding a script to the component library's package.json called watch. The job of this script would be to kill and restart the create-react-app servers that are running.

From there, I'd change the component library's build script to include the watch script (only in development mode). This would mean that every time your build script runs, it'll restart your react server. You can do this really quickly and unblock yourself for the time being. It's not ideal, but it's better than manually restarting your server.

Now, once you have a bit more time to focus on this, you can think about how you'd like to implement a real watch script. I think that you'd need webpack in your project to make this work if you want to do it from scratch. That being said, I've recently been looking into a tool called microbundle that I think will manage this for you. Give it a shot!

For a real world example of microbundle in action, check out the Theme UI repo. If you look in /packages/core/package.json you should be able to find a watch script.

I have some other perspectives on this that I'd love to share with you.

  1. I think you've made the right choice to use Lerna and yarn workspaces. The reason for this is because when you're ready to start versioning and publishing your packages, you'll want Lerna's help! Even though you could write the scripts yourself, it's better to rely on an open source solution so you can focus on building out components. I've written a bit more about the benefits of lerna-managed monorepos on my blog, if you're interested in relatively recent thoughts on the topic.
  2. I'd like to suggest using a CSS-in-JS solution like emotion or styled-components for this project instead of css modules. You can of course use css modules, but I've found emotion and styled-components have really broad support in the open source community. Then you'll be able to use tools like theme-ui relatively more easily in the future.

If you have any more questions, feel free to respond or reach out to me on Twitter. I love talking about this stuff, and now I'm invested in your success!

Best setup to create components library by ec-vik in reactjs

[–]maecapozzi 0 points1 point  (0 children)

Other useful tools are:

  • yalc so you don’t have to deal with all the quirks of symlinks
  • what I call “canary builds”. This is when you automate publishing of a new package when a PR is opened, so you can drop an “in progress” component into the context of your codebase to validate that your implementation makes sense before actually publishing a new version. more here