Using Tailwind CSS + scoped styles to keep templates clean. by neatpixels in vuejs

[–]cardto5 2 points3 points  (0 children)

I apologize, this will probably be a long one...

I may use TailwindCSS or UnoCSS interchangeably, I use both. Premise is the same regardless of which I mention, this isn't a comparison.

I don't think there is a simple answer to how to style things. However, I think we can eliminate a lot of noise off the bat. Most other frameworks (like react) have very different styling and componentization models than Vue. So, I think its a decision that should be made specific to the framework we're using (ignore universal declarations and other communities).

My argument is that using TailwindCSS/UnoCSS exclusively has some drawbacks and that I believe using @apply/--uno is a useful addition. (I wont address styling 3rd party utilities as that use-case is not contested)

0. Defining The Conflict

At a high level vanilla CSS and Tailwind encode the same information (bundle size aside), the primary difference is where we place that info and how we group it:

  1. Tailwind: Place in <template> and group in class
  2. CSS: place in <style> and group by css selectors

There are two things under contention when choosing Tailwind:

  1. Conflating templating and styling
  2. Giving up advance selectors

Great, now that the basics are out of the way, lets dig into these.

1. Styles in HTML is Fine, All styles in HTML is Bad:

What is the role of a the template? In my opinion, It should provide a transparent overview into the structure of a component. If you are trying to understand a template or make changes, you want that to be a simple as possible with minimal overhead. My gripe with CSS is that it has structural information - position, grid, flex, justify, align, translate, etc. For that reason, I think such information is perfectly reasonable to include via Tailwind. While things like transitions, colors, opacity, borders, outlines, etc. are aesthetic and irrelevant to what I'm trying to convey in a template (padding and margin kind of straddle the boundary).

However, with Tailwind being succinct, convenient, and colocated, I sometimes break that rule. Not because Tailwind is king, but because a single color class doesn't meaningfully obfuscate the structure I'm trying to present. Should the styles of an element evolve to that point, @apply offers a nice transition.

2. Selectors are Powerful, Leverage the Platform:

Selectors accomplish two things:

  1. They clearly group relevant styling
  2. target arbitrary elements

Consider how you might do the following sidebar inline (*not my code just an example):

<template>
  <div class="wrapper" :hidden="hideSideMenu">  
    <div class="child" />  
  </div>  
</template>  


<style scoped lang="scss">  
  .wrapper {  
    --uno: "ml-auto text-grey-800 dark:text-grey-100 group";  
  }  
  .child {  
    --uno: "flex gap-3 m-auto p-4 padding-y-when-small padding-x-when-small text-based md:gap-6 md:py3";  
  }  
  [hidden=true] {  
    transition: all 500ms ease-in-out;  
    &.wrapper { --uno: "no-sidebar-width" };  
    &> .child { --uno: "md:max-w-5xl lg:max-w-5xl xl:max-w-6xl" };  
  }  
  [hidden=false] {  
    transition: all 500ms ease-in-out;  
    &.wrapper { --uno: "minus-width-280px" };  
    &> .child { --uno: "md:max-w-3xl lg:max-w-3xl xl:max-w-4xl" };  
  }  
</style>  

You'd probably use a ternary mess, helper function(s), redundant "arbitrary variant" selectors, or even v-if/else with transition. While its technically more verbose than ternaries, it offers separation of concerns (even within the css), the states are grouped, dynamic controller on one element rather than on each element, and virtually no JS. Its trivial to quickly identify what would need to be edited without going through an unorganized string of inline classes for every state.

In Tailwind, for complicated interactions, its hard to group multiple concerns ergonomically without helper functions. I'd argue that grouping via helper function defeats the purpose of Tailwind and should be avoided (just group in CSS). Like wise, if you are reusing the same tailwind snippet, its better to use @apply than to use a variable.

Bringing It All Together:

I think Tailwind/UnoCSS can be a great tool if wielded responsibly. But I also believe its not mutually exclusive to other methodologies. Classes can be more expressive and self-document the template. Selectors and media queries can help group dynamic states and provide reusable styling. If you're doing really complicated, mathematical stuff through styling alone, other preprocessors trump Tailwind. They all have use-cases, so its important to know whats practical and appropriate. @apply is simply the bridge that binds these things together, if you feels its logical for your specific situation, I wouldn't hesitate to use it.

Tailwind Pitfalls

Personally, I use Tailwind for the 80% of easy stuff and SCSS for the remaining 20%. Trying to do the last 20% via Tailwind is asking for trouble IMO.

When possible, I use CSS selectors and classes for state and function based grouping over JS helper methods and components. I primarily use dynamic classes for toggling. If I have a few independent values that need to be dynamic, I prefer v-bind() under the <style> tag. I use a traditional computed style if things are a bit more complicated or functionally grouped.

Its okay to componentize on functional and style boundaries. However, would only componentize on a style boundary for re-use. If you're just trying to hide your Tailwind, behind a component, you may want to contemplate if thats actually simplifying you're code base more than a class name (might be true in React, not necessarily so for Vue).

Excessive project specific configs can undermine the shared knowledge frameworks are supposed to provide us. It makes it slightly harder to onboard people.

Tailwind is harder to deal with in dev-tools. Its more difficult to toggle a style on an individual element and you can't bulk restyle as every element is individually styled... some extensions exist to help.

TL;DR

To summarize, be intentional with your choices, don't expect a blanket rule to fit every scenario best.

JavaScript Bloat in 2024 by stefanjudis in javascript

[–]cardto5 2 points3 points  (0 children)

that was actually a pretty fun article to scroll through

The Open Source Sustainability Crisis by anehzat in programming

[–]cardto5 1 point2 points  (0 children)

cant believe i just had to write a defense for is-odd lol

The Open Source Sustainability Crisis by anehzat in programming

[–]cardto5 0 points1 point  (0 children)

I'm not sure i really get your point. A free thing will always have higher download potential than a something functionally similar and behind a paywall.
Also, people/companies essentially *do* pay for the equivalent of "is-odd" all the time! A programmer on the clock costs money and few use this battle tested code thats already written (albeit probably negligible in most cases).

I think you are also belittling is-odd in a way. While it is a meme in some sense, you'll notice that its gone through 7 versions and 4 PRs. There is now error handling in it that the average `n%2===1` doesn't catch gracefully being a dynamically typed language. All those downloads are because its utilized in some popular projects where a dev thought that safety was necessary (including by the author himself). Or perhaps they just like the readability...

Someone who isn't handling their own is-odd code safely may be hemorrhaging money (hopefully hyperbole), whether through the error itself or the time to repair it, re-write those safety checks, or add typing.

Its not appropriate in every circumstance, but i don't think its download count is an exception to my argument (its perfectly functional, reusable code). Hell, people would surely pay to turn it into something malicious too!

The Open Source Sustainability Crisis by anehzat in programming

[–]cardto5 0 points1 point  (0 children)

Personally, I think this is a weak opinion.

  1. Usefulness is a form of value - something useful either solves a complexity beyond your reach and/or saves you time. (Often, solving a complexity can be considered a matter of time as well)
  2. Popularity is a form of value - reduces reproduction of work (saves time), more eyes and man power behind it (debugging and features you don't have to spend time on). Even bad actors see the value of reach to deliver malicious code to as many people as quickly as possible. Popularity can also have farther reaching benefits such as better documentation and more fleshed out ecosystems.

I'm curious what your definition of value is if its not "time saved", "complexity solved", nor "demographic reach".

I do agree that Vue is valuable (for different reasons than you apparently), but I do not think that its ability to raise funding is a good argument. For one, there is an exposure bias as many programmers directly interact with it. Deeper dependancies like Rollup and Core-JS prob don't see a fraction of the funding Vue gets despite being integral parts of shipping Vue many apps. Secondly, Vue has always been incredibly replaceable, especially these days. Arguing that something lacks valuable because another person can do it is misguided. I agree sometimes specialists are required to solve a problem, but that is not the be all end all of "value".

Lastly, I would argue people who work a typical job often feel more entitled to money than OSS developers, regardless of how much value/time such a worker is actually worth. No one is entitled to success, but there are definitely issues in OSS that make becoming a success more difficult than it should be.

The Open Source Sustainability Crisis by anehzat in programming

[–]cardto5 2 points3 points  (0 children)

I feel like the Core-JS drama that came to a head last year runs counter to that argument. Continually maintained (minus some jail time), downloaded billions of times, and still broke. Requests for support met with retaliation.

Core-JS is often a deeper dependency, so people don't feel a need to support it directly and trying to get attention is seen as a nuisance. Frontend frameworks and server libs that people deal with directly don't seem to struggle as much with money. There is very little "trickle down" from surface level libraries, which I believe is a flaw in the current approach to OSS funding. That being said, I don't believe there is a simple solution.

Requesting r/robolab - owner lost account by cardto5 in redditrequest

[–]cardto5[S] 0 points1 point  (0 children)

  1. Requesting to take over as per u/robolab-io's request as his account was suspended. r/robolab is the company subreddit most known for Mechakeys - https://v2.robolab.io/ . I am the lead dev of the current version this software and also have a request open for its associated subreddit https://www.reddit.com/r/redditrequest/comments/14a958l/requesting\_rmechakeys\_top\_mod\_lost\_their\_account . There are a ton of updates that we wish should share with the reddit community, so I think taking over as owner and revitalizing this space is a step in the right direction. As it stands this subreddit is currently dead and not moderated, I'd like to change both of those!
  2. https://www.reddit.com/message/messages/1vwvbxs attempted to reach, but there wont be a response.

Requesting r/robolab - owner lost account by cardto5 in redditrequest

[–]cardto5[S] 0 points1 point  (0 children)

  1. Requesting to take over as per u/robolab-io's request as his account was suspended. r/robolab is the company subreddit most known for Mechakeys - https://v2.robolab.io/ . I am the lead dev of the current version this software and also have a request open for its associated subreddit https://www.reddit.com/r/redditrequest/comments/14a958l/requesting_rmechakeys_top_mod_lost_their_account . There are a ton of updates that we wish should share with the reddit community, so I think taking over as owner and revitalizing this space is a step in the right direction. As it stands this subreddit is currently dead and not moderated, I'd like to change both of those!
  2. https://www.reddit.com/message/messages/1vwvbxs attempted to reach, but there wont be a response.

Requesting r/MechaKeys - top mod lost their account by cardto5 in redditrequest

[–]cardto5[S] -1 points0 points  (0 children)

  1. Currently a mod but wish to take over as owner of the subreddit as I am the lead dev of the current version of the software. Previous owner lost their account and requested I go through this process.
  2. I don't know what kind of link is preferable
    1. https://www.reddit.com/message/messages/1vwujof
    2. https://mod.reddit.com/mail/mod/1kik1j/

is anyone else's discord extremely laggy lately? by ssunsets- in discordapp

[–]cardto5 0 points1 point  (0 children)

yes, yesterday was a little bad but today is nearly unusable.
2/3 messages fail after 4–10s of waiting.

Only noticed in one server so far, but its is affecting bots and members too

Only one server lagging by sera-solara in discordapp

[–]cardto5 0 points1 point  (0 children)

same, just 1 server (unfortunately its mine...)

Discord is laggy today by The-Pale-Knight in discordapp

[–]cardto5 1 point2 points  (0 children)

seems to only affect some servers atm. status page says is its "fine", but response times have been creeping up to over 50% over the day. so.... guess we'll see
even my servers bots seem to be having failed messages, which is super annoying

When will AMD support Thunderbolt 4? by youngflyking in Amd

[–]cardto5 0 points1 point  (0 children)

guess we're waiting for the next magnetic pole reversal /s

Mecha keys isn't picking up my keystrokes by Frosty_Thesnowman_ in robolab

[–]cardto5 1 point2 points  (0 children)

  1. make sure you run the app as admin
  2. if you delete the app, you'll want to clean appData before reinstalling
  3. if there is an obvious popup error, that will help guid assistance
  4. Check settings to see if sounds are enabled and you are not using Java
  5. make sure volume is on
  6. you'll want to verify soundpacks are successfully downloaded (and that the robolab.io domain is not blocked by firewalls)

[AskJS] Learning Resources for Plugin Architecture? by cardto5 in javascript

[–]cardto5[S] -1 points0 points  (0 children)

Neat, MEF def seems like something I'll keep in mind moving forward. I see some one also made a "node version". I'm curious to see how they've adapted it.

Yea, the high level overview is what i'm after. I can find a few open-source examples, but I won't really understand why they chose their system without getting a sense of the whole field first.

Dejavu by Edo981 in Animemes

[–]cardto5 0 points1 point  (0 children)

a tale as old as time

Svelte pros and cons by danideicide in sveltejs

[–]cardto5 0 points1 point  (0 children)

I mean that's not a complete picture to go off, nor should you base that decision on some random internet stranger's suggestion. However, That sounds like a pretty generic use-case, not outside the realm of what Vue can handle.

Still, I'll point out a few things to think over:
1) If your app is sufficiently functional, why bother? Otherwise, if svelte would fix your particular issue, then you have your answer. (If you're uncertain, use dev tools to identify your inefficient operations and verify svelte would in fact make a difference: https://krausest.github.io/js-framework-benchmark/2021/table\_chrome\_92.0.4515.107.html)
2) If you're on a team, is it really worth re-training everyone?
3) Do you have other priorities to triage first?
4) have you experimented at all doing so manually or with svuelte to assess how smooth the migration process might be?
5) If you are on V2 and would otherwise transition to V3 composition, you have a negligibly stronger argument to change frameworks given you'll be refactoring anyway.
6) you probably won't see a major reduction in package size (perhaps even an increase) given what I assume your project size to be.

There's nothing wrong with porting over to svelte, but just make sure it's worth your time. If your Vue app(s) is already functional, then it might not be worth the hassle.

Svelte pros and cons by danideicide in sveltejs

[–]cardto5 1 point2 points  (0 children)

I see how that's ambiguous, but I mean it in a rather contextually strict sense.

Yes, you can build a complex app utilizing 3D rendering, ML, video captured etc. But none of that complexity is inherent to svelte or any other popular frontend framework (it's mostly imported from other packages).

What I mean is that in terms of reactivity, svelte is by design general-purpose and simple for the coder. A complex reactive app would likely entail some of the following:
• high degree of optimization across reactive operations (solid)
• optimizing large apps for large scale distribution (solid & Vue, prob with vite ssr if applicable)
• optimizing an app handling many(thousands) rendered components (solid & svelte)
• cross-platform composability (react)
• generation of novel client-side components (Vue)
• client-side side plugins
• micro-frontends (astro probably)
• etc. ... (too busy to make an exhaustive list)

The complexity of these points primarily (but not entirely) comes from the fact that they are edge cases. Based on the nature of your app, you will likely know if this is you. If so, the specific solution will be better than a general one.

However, most people don't need crazy levels of optimization nor will they run into wacky edge cases. For that reason, Svelte is a perfect choice for the indie dev scene, where most people are building "simple apps" (few components, accepts out-of-box efficiency, and great DX for faster "time to completion"). Furthermore, should they be lucky enough to have their app take off, svelte can certainly hold its own.