5 ms·

Why use a bad faith interpretation of what Tailwind is? You know this isn't what it looks like when you are developing

by mm263 3y ago

micromacrofoot 3y ago
yeah it just looks like that to everyone else, so you're avoiding the pain yourself while inflicting it upon anyone interested in inspecting the compiled output
- soneca 3y ago
  Who would be interested in inspecting the compiled code? Genuine question.
  - diggan 3y ago
    I'm so glad this wasn't the prevailing opinion when they first came up with the web. "Inspect source" is how I learned how to build my first website in the newly released browser called "Firefox 1.0".
    - soneca 3y ago
      It wasn’t an opinion, but I think you gave me the answer anyway, which seems to be “students learning CSS”. I never learned CSS like this, so I wouldn't think of it. I started learning CSS only about 6 years ago. So I had Stack Overflow and MDN web docs for it.
      - timr 3y ago
        The answer, as with all code, is "you, six months from now". Anything that makes your code less readable is a fail. I understand that people want to treat CSS and HTML as assembly, but that's a leaky metaphor, and only works insofar as you never have to debug an actual webpage. Every place I've ever seen with tailwind has struggled with front end work, because the end result is so horribly abstracted from the code.
        soneca 3y ago
        That code posted above is the compiled code in the browser. The developing code is not unreadable like that one. I think Tailwind is very readable during development. Even if I had only used in side projects.
        paulryanrogers 3y ago
        The meaning of 'compiled' has shifted quite a bit. We used to say transpiled when the output wasn't byte or machine code.
        timr 3y ago
        Yes, I know. Tailwind emits this kind of gibberish as a compilation step, which makes it much harder to figure out what's breaking when you're using a browser inspector or something. Which of the 83 different classes is the problem? Good luck! You have to have a certain level of discipline to write clean CSS, but it really isn't that hard. It shouldn't take a 300-character inline style to make a button, when you can use CSS as intended, and have a class named "button".
    - joshmanders 3y ago
      I learned how to build websites in the late 90's similarly. Then progressed by reading blogs of other developers who shared their source in their posts. It made sense back then because it was all we had to learn. Today there's tons of code to learn from both in open source and resources. Lets get rid of this false dichotomy that the only way to learn is by viewing the source of websites, in the year 2024.
      - diggan 3y ago
        It's because of the mentality that things should be open and inspectable that we have things like browser devtools (thanks Firebug!), that is something we still use today to learn and troubleshoot. Sometimes it makes it harder when people use various compile-to-js/css languages, but also sometimes people ship their sourcemaps and again we can learn from examples. Or we try to reverse-engineer it, which is another valuable skill. I didn't mean to say this is the only way of learning, but I stand firm on that it's still a great way to learn, to look at how cool stuff was done when you come across it on real websites, not just from blog posts describing something. In addition to reading fundamentals, practicing small projects and so on, of course.
  - Feathercrown 3y ago
    I think we've lost some of the coolness of the old web from this mentality. We turned website source code from a txt to a pdf.
  - micromacrofoot 3y ago
    It's how I learned web development
- madeofpalk 3y ago
  I'm not a fan of tailwind, but this isn't what I optimise for when building websites. Besides, I suspect (but not know, because my experience with tailwind is very minimal) that that output is readable and understandable by those experienced and developing with tailwind. On top of all the other affordances modern dev tools gives to understand styling on elements (esp. the computed pane)
  - barnabee 3y ago
    When you build websites you are creating code for others to read as much as you're creating an "app" or document. It's the very essence of what's good and special about the web. If the companies that are trying to do away with this succeed, we will have lost something important. The web is and should remain de facto open source.
    - madeofpalk 3y ago
      > When you build websites you are creating code for others to read as much as you're creating an "app" or document. I couldn't disagree any more with this. When the overwhelming majority of your users would never actually be impacted by this, I believe you have more of a responsibility to the bulk of your users, rather than a fraction of a percentage. I say this as an open-source developer, who ships source maps to production. I would much rather us increase our development veloticity and build higher quality products rather than satisfy one nerd who might want to occasionally view source.
      - rado 3y ago
        Bloat is detrimental to the bulk of your users.
        deleted 3y ago
        [deleted]
    - haswell 3y ago
      > When you build websites you are creating code for others to read as much as you're creating an "app" or document. That's an approach people are certainly welcome to take, and I'm glad that some people do, but I disagree that this is what the act of building a website entails. This feels a bit like romanticizing the early days of the web, when the primary form of learning involved reading other people's source code. The depth and breadth of ways to learn in 2024 looks nothing like those early days. If I choose to build something to solve a particular need or to communicate something I care about, it's my choice as to how I do that. > It's the very essence of what's good and special about the web. The very essence of what's good and special about the web is the diversity of solutions, the myriad of entry points to becoming a web developer, the existence of tools ranging from vanilla HTML/CSS all the way up to complex frameworks like Tailwind, and your freedom to pick your path. Tailwind's existence does not threaten the layers underneath it.
cle 3y ago
For fun I tried to make an equivalently bad-faith two-liner with vanilla HTML+CSS that preserves the Tailwind behavior: <div class="custom-box"><div class="header"><div class="tab">app.css</div><div class="header-expand"></div></div><div class="content"><pre><code>@import "tailwindcss";</code></pre></div></div> .custom-box {margin-top: 1.25rem; margin-bottom: 2rem; position: relative; overflow: hidden; border-radius: 0.5rem;}.custom-box:first-child {margin-top: 0;}.custom-box:last-child {margin-bottom: 0;}.header {padding-top: 0.5rem; background-color: #1E293B; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); display: flex; color: #94A3B8; font-size: 0.75rem; line-height: 1.5;}.tab {flex: none; color: #0EA5E9; border-top: transparent; border-bottom: 2px solid #0EA5E9; padding: 0.25rem 1rem; display: flex; align-items: center;}.header-expand {flex-grow: 1; background-color: #334155/50; border: 1px solid rgba(156, 163, 175, 0.3); border-radius: 0.375rem 0 0 0;}.content pre, .content code {margin: 0; background: none; box-shadow: none;}@media (prefers-color-scheme: dark) {.custom-box::after {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);}.header {background-color: #334155;}.tab {color: #bfdbfe;}.header-expand {background-color: #475569; border-color: rgba(255, 255, 255, 0.2);}}@media (min-width: 640px) {.custom-box {margin-top: 1.5rem; margin-bottom: 2.5rem;}.header {padding-top: 0.75rem;}.tab, .header-expand {padding: 0.5rem 1.25rem;}.content pre, .content code {font-size: 0.875rem;}}@media (min-width: 768px) {.custom-box {margin-top: 2rem; margin-bottom: 3rem;}.header {padding-top: 1rem;}.tab, .header-expand {padding: 0.75rem 1.5rem;}.content pre, .content code {font-size: 1rem;}}@media (min-width: 1024px) {.custom-box {margin-top: 2.5rem; margin-bottom: 3.5rem;}.header {padding-top: 1.25rem;}.tab, .header-expand {padding: 1rem 1.75rem;}.content pre, .content code {font-size: 1.125rem;}}@media (min-width: 1280px) {.custom-box {margin-top: 3rem; margin-bottom: 4rem;}.header {padding-top: 1.5rem;}.tab, .header-expand {padding: 1.25rem 2rem;}.content pre, .content code {font-size: 1.25rem;}}@media (min-width: 1536px) {.custom-box {margin-top: 3.5rem; margin-bottom: 4.5rem;}.header {padding-top: 1.75rem;}.tab, .header-expand {padding: 1.5rem 2.25rem;}.content pre, .content code {font-size: 1.375rem;}}.content > * {margin:0; box-shadow: none; background: transparent;} (this probably an incomplete/buggy/incorrect port of Tailwind behavior)
- mm263 3y ago
  Oh no! This is unreadable and unmaintainable.
- 3y ago
darajava 3y ago
What does it look like when developing?

Why use a bad faith interpretation of what Tailwind is? You know this isn't what it looks like when you are developing

by mm263 3y ago

Why use a bad faith interpretation of what Tailwind is? You know this isn't what it looks like when you are developing

yeah it just looks like that to everyone else, so you're avoiding the pain yourself while inflicting it upon anyone interested in inspecting the compiled output

soneca 3y ago
Who would be interested in inspecting the compiled code? Genuine question.
- diggan 3y ago
  I'm so glad this wasn't the prevailing opinion when they first came up with the web. "Inspect source" is how I learned how to build my first website in the newly released browser called "Firefox 1.0".
  - soneca 3y ago
    It wasn’t an opinion, but I think you gave me the answer anyway, which seems to be “students learning CSS”. I never learned CSS like this, so I wouldn't think of it. I started learning CSS only about 6 years ago. So I had Stack Overflow and MDN web docs for it.
    - timr 3y ago
      The answer, as with all code, is "you, six months from now". Anything that makes your code less readable is a fail. I understand that people want to treat CSS and HTML as assembly, but that's a leaky metaphor, and only works insofar as you never have to debug an actual webpage. Every place I've ever seen with tailwind has struggled with front end work, because the end result is so horribly abstracted from the code.
      - soneca 3y ago
        That code posted above is the compiled code in the browser. The developing code is not unreadable like that one. I think Tailwind is very readable during development. Even if I had only used in side projects.
        paulryanrogers 3y ago
        The meaning of 'compiled' has shifted quite a bit. We used to say transpiled when the output wasn't byte or machine code.
        timr 3y ago
        Yes, I know. Tailwind emits this kind of gibberish as a compilation step, which makes it much harder to figure out what's breaking when you're using a browser inspector or something. Which of the 83 different classes is the problem? Good luck! You have to have a certain level of discipline to write clean CSS, but it really isn't that hard. It shouldn't take a 300-character inline style to make a button, when you can use CSS as intended, and have a class named "button".
  - joshmanders 3y ago
    I learned how to build websites in the late 90's similarly. Then progressed by reading blogs of other developers who shared their source in their posts. It made sense back then because it was all we had to learn. Today there's tons of code to learn from both in open source and resources. Lets get rid of this false dichotomy that the only way to learn is by viewing the source of websites, in the year 2024.
    - diggan 3y ago
      It's because of the mentality that things should be open and inspectable that we have things like browser devtools (thanks Firebug!), that is something we still use today to learn and troubleshoot. Sometimes it makes it harder when people use various compile-to-js/css languages, but also sometimes people ship their sourcemaps and again we can learn from examples. Or we try to reverse-engineer it, which is another valuable skill. I didn't mean to say this is the only way of learning, but I stand firm on that it's still a great way to learn, to look at how cool stuff was done when you come across it on real websites, not just from blog posts describing something. In addition to reading fundamentals, practicing small projects and so on, of course.
- Feathercrown 3y ago
  I think we've lost some of the coolness of the old web from this mentality. We turned website source code from a txt to a pdf.
- micromacrofoot 3y ago
  It's how I learned web development
madeofpalk 3y ago
I'm not a fan of tailwind, but this isn't what I optimise for when building websites. Besides, I suspect (but not know, because my experience with tailwind is very minimal) that that output is readable and understandable by those experienced and developing with tailwind. On top of all the other affordances modern dev tools gives to understand styling on elements (esp. the computed pane)
- barnabee 3y ago
  When you build websites you are creating code for others to read as much as you're creating an "app" or document. It's the very essence of what's good and special about the web. If the companies that are trying to do away with this succeed, we will have lost something important. The web is and should remain de facto open source.
  - madeofpalk 3y ago
    > When you build websites you are creating code for others to read as much as you're creating an "app" or document. I couldn't disagree any more with this. When the overwhelming majority of your users would never actually be impacted by this, I believe you have more of a responsibility to the bulk of your users, rather than a fraction of a percentage. I say this as an open-source developer, who ships source maps to production. I would much rather us increase our development veloticity and build higher quality products rather than satisfy one nerd who might want to occasionally view source.
    - rado 3y ago
      Bloat is detrimental to the bulk of your users.
      - deleted 3y ago
        [deleted]
  - haswell 3y ago
    > When you build websites you are creating code for others to read as much as you're creating an "app" or document. That's an approach people are certainly welcome to take, and I'm glad that some people do, but I disagree that this is what the act of building a website entails. This feels a bit like romanticizing the early days of the web, when the primary form of learning involved reading other people's source code. The depth and breadth of ways to learn in 2024 looks nothing like those early days. If I choose to build something to solve a particular need or to communicate something I care about, it's my choice as to how I do that. > It's the very essence of what's good and special about the web. The very essence of what's good and special about the web is the diversity of solutions, the myriad of entry points to becoming a web developer, the existence of tools ranging from vanilla HTML/CSS all the way up to complex frameworks like Tailwind, and your freedom to pick your path. Tailwind's existence does not threaten the layers underneath it.

cle 3y ago

For fun I tried to make an equivalently bad-faith two-liner with vanilla HTML+CSS that preserves the Tailwind behavior: <div class="custom-box"><div class="header"><div class="tab">app.css</div><div class="header-expand"></div></div><div class="content"><pre><code>@import "tailwindcss";</code></pre></div></div> .custom-box {margin-top: 1.25rem; margin-bottom: 2rem; position: relative; overflow: hidden; border-radius: 0.5rem;}.custom-box:first-child {margin-top: 0;}.custom-box:last-child {margin-bottom: 0;}.header {padding-top: 0.5rem; background-color: #1E293B; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); display: flex; color: #94A3B8; font-size: 0.75rem; line-height: 1.5;}.tab {flex: none; color: #0EA5E9; border-top: transparent; border-bottom: 2px solid #0EA5E9; padding: 0.25rem 1rem; display: flex; align-items: center;}.header-expand {flex-grow: 1; background-color: #334155/50; border: 1px solid rgba(156, 163, 175, 0.3); border-radius: 0.375rem 0 0 0;}.content pre, .content code {margin: 0; background: none; box-shadow: none;}@media (prefers-color-scheme: dark) {.custom-box::after {box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);}.header {background-color: #334155;}.tab {color: #bfdbfe;}.header-expand {background-color: #475569; border-color: rgba(255, 255, 255, 0.2);}}@media (min-width: 640px) {.custom-box {margin-top: 1.5rem; margin-bottom: 2.5rem;}.header {padding-top: 0.75rem;}.tab, .header-expand {padding: 0.5rem 1.25rem;}.content pre, .content code {font-size: 0.875rem;}}@media (min-width: 768px) {.custom-box {margin-top: 2rem; margin-bottom: 3rem;}.header {padding-top: 1rem;}.tab, .header-expand {padding: 0.75rem 1.5rem;}.content pre, .content code {font-size: 1rem;}}@media (min-width: 1024px) {.custom-box {margin-top: 2.5rem; margin-bottom: 3.5rem;}.header {padding-top: 1.25rem;}.tab, .header-expand {padding: 1rem 1.75rem;}.content pre, .content code {font-size: 1.125rem;}}@media (min-width: 1280px) {.custom-box {margin-top: 3rem; margin-bottom: 4rem;}.header {padding-top: 1.5rem;}.tab, .header-expand {padding: 1.25rem 2rem;}.content pre, .content code {font-size: 1.25rem;}}@media (min-width: 1536px) {.custom-box {margin-top: 3.5rem; margin-bottom: 4.5rem;}.header {padding-top: 1.75rem;}.tab, .header-expand {padding: 1.5rem 2.25rem;}.content pre, .content code {font-size: 1.375rem;}}.content > * {margin:0; box-shadow: none; background: transparent;} (this probably an incomplete/buggy/incorrect port of Tailwind behavior)

mm263 3y ago
Oh no! This is unreadable and unmaintainable.
3y ago

darajava 3y ago

What does it look like when developing?