phppup Posted 16 hours ago Share Posted 16 hours ago (edited) I believe @requinix was right in his response to my recent Miscellaneous post regarding AI. So here I am, having (regrettably) relied on AI for help in building a webpage. But let me get to my question. The page was built with a pop-up modal that contains a short list of items which AI decided to create in hardcoded HTML with inline CSS. (This wouldn't have been my choice methodology and I tried to get the darn thing to loop through an array but this was ultimately the best working result provided. Ugggh!) Next came the fun part. *sarcasm* I wanted a second modal similar to the first. (For simplicity, think one for boys and the second for girls.) When I asked/told (I'm not quite sure who was 'in charge'... LOL) AI to make a second modal that resembled the first it took a lot of tweaking to reach my goal. Ultimately, functions and layouts became horribly fragmented and frustration ruled the day. I decided I needed to do this the ole fashion way and write MY code myself. Since I already achieved a partially working script, I decided to maintain uniformity to make progress. Well, as it turns out, the second modal was not hardcoded like the first. Instead, all the inline text and CSS is generated with JavaScript (ie: .. elementById).style.whatever= ) For uniformity, one of these approaches has to be replaced. The question: Is one more efficient? Beneficial? Effective? I've been accused in the past of not being up to date with modern methods, so I thought I'd ask. Edited 16 hours ago by phppup Quote Link to comment https://forums.phpfreaks.com/topic/329974-code-with-css-versus-js-generated/ Share on other sites More sharing options...
requinix Posted 15 hours ago Share Posted 15 hours ago I'm betting that Tea was developed through vibe coding... 1 hour ago, phppup said: The page was built with a pop-up modal that contains a short list of items which AI decided to create in hardcoded HTML with inline CSS. 98% of inline CSS is bad and shouldn't be inline CSS, but IMO there are reasonable and not uncommon situations where inline CSS is the "correct" solution: Namely, when an amount of required styling for some element is just so damned specific and unique that it doesn't make sense to hoist it into CSS that exists Somewhere In The Project, and instead tightly coupling it to the element (ie. inline) actually makes understanding and maintaining it easier. Which isn't to say that it could/should never be promoted into a stylesheet, just that there's no apparent call to do so (yet). Off topic, just saying. (Even more off-topic is that Bootstrap is the worst thing to ever happen to the world of front-end development; I could write a VERY lengthy rant about how screwed up standard CSS practices are because of that nonsense.) 1 hour ago, phppup said: When I asked/told (I'm not quite sure who was 'in charge'... LOL) AI to make a second modal that resembled the first it took a lot of tweaking to reach my goal. That's the thing pro-vibe coding people leave out when they evangelize the idea: yeah, sure, the AI spit out a bunch of code much faster than a professional developer could have, but the amount of time spent screwing around with it afterwards because the output sucked offsets those gains by so, so much. 1 hour ago, phppup said: The question: Is one more efficient? Beneficial? Effective? As an old-school programmer, I avoid using Javascript for anything that regular HTML/non-Javascript practices can handle. Which means I hate React and its frenemies. But even setting that aside, there really is no good reason in remotely modern web development to be using Javascript to simulate CSS functionality. Back in the 2000s that was necessary because CSS was still young and web designers wanted to do much more than it was capable of (we didn't even have :hover back then), but nowadays CSS is capable of far more than many people give it credit for. Naturally there are still concepts that CSS can't do and that Javascript is required to "polyfill" - UIs will always want to be one step ahead of technology - but if CSS can do a thing then CSS should do the thing. Reasons vary: graceful degradation, requirements for technical know-how, browser performance, single-responsibility principle... Quote Link to comment https://forums.phpfreaks.com/topic/329974-code-with-css-versus-js-generated/#findComment-1657508 Share on other sites More sharing options...
phppup Posted 13 hours ago Author Share Posted 13 hours ago (edited) @requinix I see your points. Never got interested in Bootstrap primarily bc I didn't understand the reason to use something that was 'secretively' doing something that I could readily do and control. I agree with your points on CSS. I've seen design achievements where the same result was met with CSS as could be with JS (ie: flashing buttons or sliding boxes). Unless there is a compelling reason, I tend to gravitate to the CSS. I think it has something to do with early experiences where JS could be disabled (thereby leaving hours of dedicated design work inoperative) where CSS remains active. It took some research to understand: "I'm betting that Tea was developed through vibe coding..." From a literal perspective, I was conflicted as to whether you were implying that folks abandoned a laborious AI inclusive effort for such a simple task (of making tea) or that it began to take so much time that they required a respite (and made tea). I should have paid more attention to the capitalized T. I suppose it's because I haven't had my morning coffee. *wink* Edited 13 hours ago by phppup Clean up post Quote Link to comment https://forums.phpfreaks.com/topic/329974-code-with-css-versus-js-generated/#findComment-1657509 Share on other sites More sharing options...
gizmola Posted 7 hours ago Share Posted 7 hours ago 5 hours ago, phppup said: @requinix I see your points. Never got interested in Bootstrap primarily bc I didn't understand the reason to use something that was 'secretively' doing something that I could readily do and control. I'm going to jump in here, and clarify some things about (twitter) bootstrap. It doesn't do anything secretively. It's css with a sprinkling of jquery (at least in the old days) in places where there was no good way of adding functionality without a bit of js. Much of that is non-essential, or has a workaround. As jquery fell out of favor, this became a knock on Bootstrap, and at this point they have decoupled and removed the jquery dependency. It was also designed to make it simple for people to make a responsive website with it's "mobile first" philosophy, and to take advantage of flexbox and css grid without knowing how to do that, at a time when techniques for that were not well understood by many developers or established. It made it easy for novices to implement a lot of sophisticated css techniques without understanding them, and It certainly influenced and set the stage for many other css frameworks that have emerged since then like tailwind. When you look at it with an understanding of all those underlying concepts and the techniques you would use if you were creating all your css from scratch, it makes a lot more sense, although at that point, most UI developers wouldn't use it. It's still a great foundation for getting decent looking UI together when you are more focused on serverside development. If you are already in the practice of using scss/sass then it's even better, but many people never got to that level of proficiency, so it did lead to a proliferation of vanilla looking "bootstrap" websites for a time. I would rather see someone learn to use bootstrap effectively to build a responsive website (which btw, shouldn't all sites be responsive now?) rather than flounder or skip that entirely. I do think there is a misunderstanding amongst many people, both in how you should apply it, and how it should be used. I think a lot of people who don't know how to build components like modals, navbars and accordians thought of bootstrap as a quick way to get one of these UI elements working, using cut/paste from the documentation, and without going beyond that. It's sort of a catch-22 that you really have to understand css layout, and the things that go into responsiveness in order to see how best to use bootstrap, and a lot of novice developers struggle to get those fundamentals, and see the whole framework as magic. Quote Link to comment https://forums.phpfreaks.com/topic/329974-code-with-css-versus-js-generated/#findComment-1657535 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.