128 karma · joined July 16, 2012
[1] https://www.investopedia.com/terms/i/international-poverty-l...
[2] https://www.sciencedirect.com/science/article/pii/S0305750X2...
You can `import` and `export` just like in the browser (and in TypeScript) as long as your files come with the `.mjs` extension. Cherry adds this extension by default, so I imagine it comes with the server in mind.
You can also keep the `.js` extension and configure this behavior in the `package.json` to run the same files both client- and serverside.
Some libraries still expect to run as CommonJS, but then you might find an "es" version if you poke around in their repositories.
.my-tab { @apply my-button bg-transparent; }
There is actually a very powerful CSS framework hidden in there somewhere, but they remain intent on appealing to developers who believe that real layout is coded with JavaScript, perhaps it is because Tailwind is a multi million dollar business that relies on selling components to teams that give up on making their own.
Your components don't minimize outside dependencies when they share the same global stylesheet, by the way, they would for example not work in my website even though I am using Tailwind (if highly customized). This shared dependency, or "global variables leaking into my scope" as programmers would phrase it, is the problem that CSS frameworks have been fighting for years, and now it's become a brilliant feature of Tailwind that components can share styles. Welcome to CSS! Now you only need to define your complex layouts via @apply and you can share them as well, that is what composability is all about.
.button { background-color: blue; color: white; padding: 0.5rem 0.75rem; border-radius: 0.25rem; }
Then the browser will need to download less bytes:
<button class="button">Click</button>
Compared to:
<button class="bg-blue text-white px-3 py-2 rounded-sm">Click</button>
And this does make a difference when your entire layout is done with Tailwind. Consider that the HTML, unlike the CSS, might typically not be cached, and that the server is now also charged with emitting higher loads of data. Consider also that all these utility classes are all loaded in the CSS on the front page even if some or most of them is used on everything except the front page. The performance win is not as unquestionable as Tailwind would like to suggest.
When you declare `py-4 px-2 bg-blue text-white rounded-lg` on five buttons in a row, doesn't this work almost exactly like inline strings when you compare to the semantic classname `button-secondary` that is maintained in one single place much like a constant? And wouldn't you just rely on constants to maintain consistency between components, in other words use CSS variables?
.button-secondary { background-color: var(--color-action-secondary); }
Inline media queries are not easy to read. What does this button do?
<button class="inline-block px-large py-medium rounded-large border-solid border-thin font-regular bg-core-yellow-100 border-core-yellow-300 bg-text-core-yellow-800 bp-medium:font-medium bp-medium:bg-core-green-100 bp-medium:border-core-green-300 bp-medium:text-core-green-800 bp-large:font-bold bp-large:bg-core-blue-100 bp-large:border-core-blue-300 bp-large:text-core-blue-800 bp-x-large:font-black bp-x-large:bg-core-red-100 bp-x-large:border-core-red-300 bp-x-large:text-core-red-800">Sign in</button>button>
It changes font size, background color, border color and text color when you resize. That's easy to tell if you don't inline it
.button { @apply inline-block px-large py-medium rounded-large border-solid border-thin; @apply font-regular bg-core-yellow-100 border-core-yellow-300 text-core-yellow-800; @media (--bp-medium) { @apply font-medium bg-core-green-100 border-core-green-300 text-core-green-800; } @media (--bp-large) { @apply font-bold bg-core-blue-100 border-core-blue-300 text-core-blue-800; } @media (--bp-x-large) { @apply font-black bg-core-red-100 border-core-red-300 text-core-red-800; } }
Edit: Hacker News did of course inline it, but that only proves the point.
The same goes for light and dark mode. These are by the way Custom Media Queries [1], but Tailwind has a `@screen` directive much to the same effect.
Gradients aren't much different in CSS nowadays, really, and the "built in grid system" is really just a super inflexible subset of CSS Grid that will run out of luck if you need something other than equal sized columns. If you use it for the core page layout, chances are low that you will want your sidemenu, main content and sidebar always appear in equal width columns. In Tailwind you don't, of course, but it is a wonderful feature of CSS.
Tailwind actually is future proof, but that's only because you remove Tailwind from the list of dependencies and check the generated CSS into your souce code repository. At some point all these websites will need an overhaul of the visual identity and people will realize all over again why presentational attributes were removed in HTML4 along with the introduction of CSS. You can update your Tailwind version, then, but nothing will happen. Fortunately, this "plugin system for custom code generation" can be replaced with a stylesheet.
Tailwind has certain qualities, but the things you mention are not some of them. I like that you can't simply copy the CSS from some textarea in Figma and paste it into the CSS, because that will soon make your website even more unmaintable even if it is vanilla CSS. You are in other words forced to think about the layout, the spacing system, the color variables and the breakpoint behaviors, ironically what the typical proponent of Tailwind would like to avoid. If all of these things are declared in a highly customized Tailwind preset, and if you elect to maintain complex components (eg. with synchronized breakpoint changes) in CSS files via `@apply`, it becomes an effective tool to enforce a "design system". Some might say that Tailwind's own creator advises against this strategy, but that should only encourage you, in my opinion.
Essentially, what he is saying [2] is that you should not use SQL to transform you date from one format to the other because the SQL will break when someone changes the database structure. Instead, you should just hardcode the result of this transformation directly into the database and now you won't need SQL at all. You could argue that this would be retarded since the abstraction layer enables different, future presentations of the data in question and that is exactly what I am trying to say.
My best advise is to go light on presentational attributes, which is what utility classes is, and move your Tailwind into proper CSS as soon as the implementation indicates moderate complexity [3]. Here you can make use of the `@layer components` stuff that bears an uncanny resemblance to semantic classnames, but more importantanly, now your Tailwind can easily break out into real CSS, for example to author your core page design with a Grid of uneven column sizing. Make sure to Use CSS variables for everything including your Tailwind preset so that `12px` are never mentioned in the JSON, but instead refers to `var(--base-unit-or-something)` which can be referenced equally in vanilla CSS. Keep the best of both worlds and Tailwind can add more value than it destroys.
[1] https://preset-env.cssdb.org/features/#custom-media-queries
[2] https://adamwathan.me/css-utility-classes-and-separation-of-...
[3] https://frameable.com/company/tech/how-we-found-sanity-in-a-...
I can't tell if you are in denial of this or if you believe it so evident as to be a waste of your time.
https://survivingtomorrow.org/monopoly-isnt-a-game-it-s-a-pr...
[1] https://en.m.wikipedia.org/wiki/First_World
[2] https://eand.co/how-america-collapsed-and-became-a-fourth-wo...
[3] https://eand.co/britain-just-hit-the-next-level-of-self-dest...
function johnson() { johnson.state = {}; }
This is however shared state and the state will be reset whenever the function is called a second time. So what you normally do with a function is to pass the state via arguments and now the same function can work with different states. React could totally do this via props or as a second argument.
function Johnson(props, state) {}
Instead they changed the laws of functions so that a function can act different the first time it is called and also be called the first time multiple times if and when the function calls a functions that looks like JavaScript but follow different rules [1].
This is weird.
[1] https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at...
Another hot take on inflation, I think, is https://eand.co/the-economys-crashing-because-we-re-an-indus...
> ... stories about how the increasing temperatures from climate change kill people in heat waves, but fail to mention that the same increasing temperatures also save lives because fewer people freeze to death. Yeah, I don’t trust any of these sources.
This is not sourced, but then again it is also not science.
It's funny because all the theories presented in the article - that inflation is caused by mandatory minimum wage, government regulation and taxes - is exactly what a greedy person would suggest.