Comment by yomismoaqui
3 days ago
It's a little shameful but I still struggle when centering divs on a page. Yes, I know about flexbox for more than a decade but always have to search to remember how it is done.
So instead of refreshing that less used knowledge I just ask the AI to do it for me. The implications of this vs searching MDN Docs is another conversation to have.
No shame in that. I keep struggling to figure out the point of view of the CSS designers.
They don't think like graphic designers, or like programmers. It's not easy for beginners. It's not aimed at ease of implementation. It's not amenable to automated validation. It's not meant to be generated.
If there is some person for whom CSS layout comes naturally, I have not met them. As far as I can tell their design goal was to confuse everyone, at which they succeeded magnificently.
> I keep struggling to figure out the point of view of the CSS designers.
Before 2017, the web had no page layout ability.
Think about it. Before the advent of Flexbox and CSS Grid, certain layouts were impossible to do. All we had were floats, absolute positioning, negative margin hacks, and using the table element for layout.
> They don't think like graphic designers or like programmers. It's not easy for beginners.
CSS is dramatically easier if you write it in order of specificity: styles that affect large parts of the DOM go at the top; more specific styles come later. Known as Inverted Triangle CSS (ITCSS), it has been around for a long time [1].
> It's not aimed at ease of implementation. It's not amenable to automated validation.
If you mean linting or adhering to coding guidelines, there are several; Stylelint is popular [2]. Any editor that supports Language Server Protocol (LSP), like VS Code and Neovim (among others), can use CSS and CSS Variables LSPs [3], [4] for code completion, diagnostics, formatting, etc.
> It's not meant to be generated. Says who? There have been CSS generators and preprocessors since 2006, not to mention all the tools which turn mockups into CSS. LLMs have no problem generating CSS.
Lots of developers need to relearn CSS; the book Every Layout is a good start [5].
[1]: https://css-tricks.com/dont-fight-the-cascade-control-it/
[2]: https://stylelint.io
[3]: https://github.com/microsoft/vscode-css-languageservice
[4]: https://github.com/vunguyentuan/vscode-css-variables
[5]: https://every-layout.dev
Developers can learn a new programming language in a few weeks to months of just using it. If they can't learn to reliably and predictably use CSS in the same way, then I'd say that makes CSS flawed.
2 replies →
Hah, centering divs with flexbox is one of my uses for this too! I can never remember the syntax off the top of my head, but if I say "center it with flexbox" it spits out exactly the right code every time.
If I do this a few more times it might even stick in my head.
> Yes, I know about flexbox for more than a decade but always have to search to remember how it is done.
These days I use display: flex; so much that I wish the initial value of the display property in CSS should be flex instead of inline;
Try tailwind. Very amenable to LLM generation since it's effectively a micro language, and being colocated with the document elements, it doesn't need a big context to zip together.
Surely searching "centre a div" takes less time than prompting and waiting for a response...
Search “centre a div” in Google
Wade through ads
Skim a treatise on the history of centering content
Skim over the “this question is off topic / duplicate” noise if Stack Overflow
Find some code on the page
Try to map how that code will work in the context of your other layout
Realize it’s plain CSS and you’re looking for Tailwind
Keep searching
Try some stuff until it works
Or…
Ask LLM. Wait 20-30 seconds. Move on to the next thing.
Half the reason search engines are so miserable to use anymore is that they've been laden down with so much low quality LLM-generated content.
The middle step is asking an LLM how it's done and making the change yourself. You skip the web junk and learn how it's done for next time.
1 reply →
> Search “centre a div” in Google
Aaand done. Very first result was a blog post showing all the different ways to do it, old and new, without any preamble.
Or, given that OP is presumably a developer who just doesn't focus fully on front end code they could skip straight to checking MDN for "center div" and get a How To article (https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layo...) as the first result without relying on spicy autocomplete.
Given how often people acknowledge that ai slop needs to be verified, it seems like a shitty way to achieve something like this vs just checking it yourself with well known good reference material.
3 replies →
Wait till the VC tap gets shut off.
You: Hey ChatGPT, help me center a div.
ChatGPT: Certainly, I'd be glad to help! But first you must drink a verification can to proceed.
Or:
ChatGPT: I'm sorry, you appear to be asking a development-related question, which your current plan does not support. Would you like me to enable "Dev Mode" for an additional $200/month? Drink a verification can to accept charges.
23 replies →
If only it were that easy. I got really good at centering and aligning stuff, but only when the application is constructed in the way I expect. This is usually not a problem as I'm usually working on something I built myself, but if I need to make a tweak to something I didn't build, I frequently find myself frustrated and irritated, especially when there is some higher or lower level that is overriding the setting I just added.
As a bonus, I pay attention to what the AI did and its results, and I have actually learned quite a bit about how to do this myself even without AI assistance