4 ms·

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 remembe

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.

barrkel 10mo ago
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.
simonw 10mo ago
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.
jfengel 10mo ago
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.
- alwillis 10mo ago
  > 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/ https://css-tricks.com/dont-fight-the-cascade-control-it/ [2]: https://stylelint.io https://stylelint.io [3]: https://github.com/microsoft/vscode-css-languageservice https://github.com/microsoft/vscode-css-languageservice [4]: https://github.com/vunguyentuan/vscode-css-variables https://github.com/vunguyentuan/vscode-css-variables [5]: https://every-layout.dev https://every-layout.dev
  - naasking 10mo ago
    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.
    - alwillis 10mo ago
      > If they can't learn to reliably and predictably use CSS in the same way, then I'd say that makes CSS flawed. It's not the fault of CSS that most developers don't learn to use it correctly. That's like blaming the bicycle when learning to ride one. Frankly, it's not a priority for most of them to learn CSS; they don't see it as a "real" programming language; therefore it's not worth their time.
      - naasking 10mo ago
        > It's not the fault of CSS that most developers don't learn to use it correctly. That's like blaming the bicycle when learning to ride one. It's not like blaming the bicycle, that's the whole point of my analogy to programming languages. Like I said, learning a new programming language in a few weeks of regular use is a common experience. This also happens with bikes, because you can try a few things, lose balance, make a few intuitive adjustments, and iterate easily. This just doesn't work with CSS. There are so many pitfalls, corner cases and reasoning is non-compositional and highly contextual. That's the complete opposite of learning to ride a bike or learning a new programming language. You literally do need to read like, a formal specification of CSS to really understand it, and even then you'll regularly get tripped up. People just learn to stick to a small subset of CSS for which they've managed to build a predictable model for, which is why we got toolkits like Bootstrap. Edit: this also explains why things like Tailwind are popular: it adds a certain amount of predictability and composition to CSS. Using CSS was way worse in the past when browser compatibility was worse, but it's still not a great experience.
llmslave2 10mo ago
Surely searching "centre a div" takes less time than prompting and waiting for a response...
- duggan 10mo ago
  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.
  - bitwize 10mo ago
    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.
    - duggan 10mo ago
      I mean sure, that could happen. Either it's worth $200/month to you, or you get back to writing code by hand.
    - llmslave2 10mo ago
      Calling it now: AI withdrawal will become a documented disorder.
      - freedomben 10mo ago
        I can absolutely see that happening. It's already kind of happened to me a couple of times when I found myself offline and was still trying to work on my local app. Like any addiction, I expect it to cost me some money in the future
robofanatic 10mo ago
> 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;

barrkel 10mo ago

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.

simonw 10mo ago

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.

jfengel 10mo ago

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.

alwillis 10mo ago
> 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/ https://css-tricks.com/dont-fight-the-cascade-control-it/ [2]: https://stylelint.io https://stylelint.io [3]: https://github.com/microsoft/vscode-css-languageservice https://github.com/microsoft/vscode-css-languageservice [4]: https://github.com/vunguyentuan/vscode-css-variables https://github.com/vunguyentuan/vscode-css-variables [5]: https://every-layout.dev https://every-layout.dev
- naasking 10mo ago
  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.
  - alwillis 10mo ago
    > If they can't learn to reliably and predictably use CSS in the same way, then I'd say that makes CSS flawed. It's not the fault of CSS that most developers don't learn to use it correctly. That's like blaming the bicycle when learning to ride one. Frankly, it's not a priority for most of them to learn CSS; they don't see it as a "real" programming language; therefore it's not worth their time.
    - naasking 10mo ago
      > It's not the fault of CSS that most developers don't learn to use it correctly. That's like blaming the bicycle when learning to ride one. It's not like blaming the bicycle, that's the whole point of my analogy to programming languages. Like I said, learning a new programming language in a few weeks of regular use is a common experience. This also happens with bikes, because you can try a few things, lose balance, make a few intuitive adjustments, and iterate easily. This just doesn't work with CSS. There are so many pitfalls, corner cases and reasoning is non-compositional and highly contextual. That's the complete opposite of learning to ride a bike or learning a new programming language. You literally do need to read like, a formal specification of CSS to really understand it, and even then you'll regularly get tripped up. People just learn to stick to a small subset of CSS for which they've managed to build a predictable model for, which is why we got toolkits like Bootstrap. Edit: this also explains why things like Tailwind are popular: it adds a certain amount of predictability and composition to CSS. Using CSS was way worse in the past when browser compatibility was worse, but it's still not a great experience.

llmslave2 10mo ago

Surely searching "centre a div" takes less time than prompting and waiting for a response...

duggan 10mo ago
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.
- bitwize 10mo ago
  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.
  - duggan 10mo ago
    I mean sure, that could happen. Either it's worth $200/month to you, or you get back to writing code by hand.
  - llmslave2 10mo ago
    Calling it now: AI withdrawal will become a documented disorder.
    - freedomben 10mo ago
      I can absolutely see that happening. It's already kind of happened to me a couple of times when I found myself offline and was still trying to work on my local app. Like any addiction, I expect it to cost me some money in the future

robofanatic 10mo ago

> 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;