vishnuharidas's comments

On: Show HN: Struggle with CSS Flexbox? This Playgroun...

[vishnuharidas]

Why did they name those props `justify-content` and `align-items` instead of `main-axis-arrangement` and `cross-axis-alignment` which makes more sense?

[freetonik → vishnuharidas]

There is probably some explanation, but in general, I find many CSS properties confusing and unintuitive: `color`, `text-align`, `position: absolute` vs `position: fixed` (absolute is still technically relative!), etc.

[cluckindan → freetonik]

Everything is laid out on the page in a flow, according to DOM order. Think how a typewriter produces text on a page: top-down, left-to-right. This is the flow.

Absolute takes the element out of the flow while relative maintains it in the flow.

[sureIy → freetonik]

What isn't clear (even to many experts) is that certain properties change the layout model entirely and that text has its own "pushing" box that contributes to sizing.

[cantSpellSober → vishnuharidas]

For discussion I'd argue

• this name works with Grid and Flexbox

• this convention matches justify-items and justify-self, which makes sense

to your point I still confuse it with align-content sometimes.

[rererereferred → vishnuharidas]

Similarly, I find confusing that the `grid-template` shorthand uses the y axis first: y1 / x1 / y2 / x2

It's also not zero based which I always forget.

[insin → vishnuharidas]

Either Google has shifted _so much_ focus to getting an LLM to tell you about very real Encanto 2 spoilers that its search capabilities have atrophied, or my surprise at there not already being a Tailwind plugin for this is justified:

    const plugin = require('tailwindcss/plugin')

    const aliasFlexboxAlignment = plugin(function({ addUtilities }) {
      addUtilities({
        '.cross-axis-baseline': { 'align-items': 'baseline' },
        '.cross-axis-center': { 'align-items': 'center' },
        '.cross-axis-end': { 'align-items': 'flex-end' },
        '.cross-axis-start': { 'align-items': 'flex-start' },
        '.cross-axis-stretch': { 'align-items': 'stretch' },
        '.main-axis-around': { 'justify-content': 'space-around' },
        '.main-axis-between': { 'justify-content': 'space-between' },
        '.main-axis-center': { 'justify-content': 'center' },
        '.main-axis-end': { 'justify-content': 'flex-end' },
        '.main-axis-evenly': { 'justify-content': 'space-evenly' },
        '.main-axis-normal': { 'justify-content': 'normal' },
        '.main-axis-start': { 'justify-content': 'flex-start' },
      })
    })

[cluckindan → insin]

Tailwind sure is a blight upon frontend maintainability.

[9dev → cluckindan]

Is it, though? How much easier to refactor it in the future can it be, other than being able to search-replace Tailwind classes when the need arises to?

[tracker1 → 9dev]

... except for where you aren't wanting to replace.

[9dev → tracker1]

Well, what is it then that is so complex about Tailwind? I’ve been hearing that for so long, but nobody was ever able to explain succinctly what Tailwind made so awfully complicated.

[gjsman-1000 → cluckindan]

I strongly disagree; any large project using CSS tended to have arcane names for everything and turned into a Tailwind of its own, but worse.

I also like Tailwind because it’s so self-documenting. Even if Tailwind’s development were to stop, tomorrow, and all of the style sheets were lost globally, I would know what everything is meant to be.

[cluckindan → gjsman-1000]

There is no semantic connection between design and code.

[gjsman-1000 → cluckindan]

I don’t even know what this means, but it sounds either stupid, or a theory that only works in a clean room laboratory.

[cluckindan → gjsman-1000]

Maybe you need to figure it out before jumping to conclusions like that.

I think it’s much easier to understand what

    <input class=”input input--email input--valid”>

is supposed to be compared to

    <input class=”bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal”>

[gjsman-1000 → cluckindan]

Bull. I have no clue at this glance what .input specifies, or what I can override without a conflict. Heck, .input might not even exist, resulting in only stock browser styles. The bottom one, I can fully picture while it isn’t much longer, the above is opaque and gives me no information at all about the look.

Secondly though, and why this opinion is frankly stupid, is that I can just put this in my CSS code before it’s built through Vite:

input { @apply bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal; }

And then lo and behold, I’ll do you one better:

<input type=“text”> </input> is now fully styled, with Tailwind only.

[cluckindan → gjsman-1000]

It says ”input” right there in the classname. @apply might be the only sane way to use Tailwind, but it seems like a post-hoc mixin construct, and definitely has the same level of indirection of styles that you claim is an issue with classnames.

Strange you would be worried about accidental overrides with class selectors but then go ahead to target styles with tag selectors. Is that not objectively worse?

Btw, targeting input[type=”text”] means now you cannot apply those styles to a regular <span> or <div> using a class, which is sometimes useful, especially in very large projects.

I am still not at all convinced Tailwind is even slightly useful. It feels like shoehorning HTML4 <color>, <font> etc. into HTML5 classes.

All in all, your arguments come off as ad hoc rationalizations for a personal preference, not as substantial examples of Tailwind’s superiority over more traditional CSS approaches.

[sod → vishnuharidas]

I didn't confuse it since I use the mnemonic "formatting text to “justify” is horizontal in my language".

Sure you can change that. But that covers the flex default behavior.

[vishnuharidas → sod]

But when the `flex-direction` is `column`, `justify-content` becomes synonymous for "vertical alignment" - that's what creates the confusion here.

[rererereferred → vishnuharidas]

I guess it makesmsense if flex-direction vertical is like switching to a vertical language.

On: One Solution Every Week (1SeW)

[vishnuharidas]

Solve a simple algorithm/problem every week in your fav programming language and commit. This is for people who stopped day-to-day coding professionally, but still write code for personal pleasure.

On: Timemap.org – Interactive Map of History

[vishnuharidas]

Excellent research and great output, this is something that I wanted for a long time, a movable timeline that shows the civilization at that time. Thanks for building this!

One improvement that I suggest is for the timeline. Currently if I have to go to the past/future, I have to move the timeline knob to the extreme left/right, and the timeline will jump. Instead of that if I can drag the timeline to the desired era and click on the timeline to place the knob (or something like that) it will be easy to use.

On: Terminal colours are tricky

[vishnuharidas]

Not just terminal, but be it Neon signs or LED name boards, blue is the toughest on eyes during night time. It's always blurry from a distance, and can't even focus on it. I have seen big businesses putting up huge name boards in blue lights, and I think how they can spend a lot of money without even realizing that people can't read it.

On: Hand-crafting a QR code using Checker Board and St...

[vishnuharidas]

That's correct, thanks for pointing out. Can't edit the caption now.

On: Show HN: Free AI tailored workout generator

[vishnuharidas]

What the font! Can't even read it for 5 seconds :(

[punkspider → vishnuharidas]

Same here. I think normally I'd move on, but because it's a Show HN and it got some attention I'm forcing myself.

On: On over-engineering; finding the right balance

[vishnuharidas]

Experience and domain knowledge also matters when designing. For some parts, futuristic thinking is not at all needed while other parts may need it. If you are building a ticketing software, you should expect to add different kind of printers (dot matrix, thermal, inkjet, etc.) so you add an abstraction. The ticket text format may change, so some abstraction will help. The API service hander might not change at all, so an abstraction is unnecessary in that case.

On: The code worked differently when the moon was full...

[vishnuharidas]

Another interesting debugging story - https://news.ycombinator.com/item?id=32709045

On: Gameboy music and sound archive for MIDI

[vishnuharidas]

They should embed a MIDI player like this: https://cifkao.github.io/html-midi-player/

[nness → vishnuharidas]

I've created a Tampermonkey script to do just that: https://gist.github.com/lachlanmcdonald/b2d9663fdb13fc1df820...

It mostly works — except I've noticed that html-midi-player will continue to play the last note if there's any kind of delay set, which is jarring. html-midi-player doesn't seem to expose a JavaScript API to make any of it simple...

[thesuitonym → vishnuharidas]

Why not just a simple <embed> and let the browser handle it? Or do modern browsers not handle MIDI anymore?

[nness → thesuitonym]

No support — seems neither <embed> nor <audio> can play the midi format.

[_flux → thesuitonym]

I wouldn't expect browsers to come with a General MIDI patch set..

[pajko → _flux]

https://github.com/feross/timidity

[thesuitonym → _flux]

In the 90s and early 00s, that's pretty much all the embed tag was for. Other formats were too big.

On: We don't have official RSS feed support for now, b...

[vishnuharidas]

RSS reader software won't be successful. RSS reader should be built into the browser and every time you open the browser, the RSS feed should be the landing page. Every time you open a new tab, it should show a minimal feed that can be fully expanded.

[the_snooze → vishnuharidas]

Firefox used to have this feature, sort of. https://support.mozilla.org/en-US/kb/live-bookmarks

[zlg_codes → the_snooze]

This stuff was cash money. Firefox's RSS and Atom support used to be amazing, especially with extensions.

[carrozo → vishnuharidas]

Yes! Why isn’t this the case already?