|
I guess it's like yesterday I had to make a grid that sort of matched the existing 12 columns through the rest of the site, but needed the ability for an image to bleed to the edge of the viewport on one side. It's easy with the utility classes to make a 'grid-template-columns: 1fr repeat(12, 110px) 1fr' on a large desktop that shrinks to '56px repeat(12, 1fr) 56px' on desktops below 1600px, and then gets totally switched up to a stacked four column design on tablets and below? I'd be able to write something like 'width: calc(100% + 16px)' and 'transform: translateX(-16px)' okay? Or is the thought that those are really edge case-y type things and I would write those without the utility classes? Genuinely curious. I don't mean it as a gotcha.
|
#
?
May 21, 2022 15:45
|
|
|
|
| # ? May 17, 2024 03:43 |
|
|
There's a few things going on there. Tailwind does have classes to deal with grid layouts, though I'm not experienced enough with CSS grid to say if it's 1 to 1 analogous to what you're doing. Responsiveness is absolutely covered by Tailwind no problem, including turning a 12 column layout into a 4 column layout on tablets or smaller. You might be able to do some one off stuff, in Tailwind you can write one-off values by encapsulating them in square brackets i.e. w-[500px]. I don't know about using calc in Tailwind though, I suppose that could be a limitation. Arbitrary value info (not sure how new it is to Tailwind but it's a feature I recently discovered myself): https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values Macichne Leainig fucked around with this message at 15:55 on May 21, 2022 |
|
#
?
May 21, 2022 15:49
|
|
|
Grinding leetcode sucks poo poo but I have referrals for msft and apple so I might as well do it
|
|
#
?
May 21, 2022 23:46
|
|
|
fsif posted:I guess it's like yesterday I had to make a grid that sort of matched the existing 12 columns through the rest of the site, but needed the ability for an image to bleed to the edge of the viewport on one side. It's easy with the utility classes to make a 'grid-template-columns: 1fr repeat(12, 110px) 1fr' on a large desktop that shrinks to '56px repeat(12, 1fr) 56px' on desktops below 1600px, and then gets totally switched up to a stacked four column design on tablets and below? I'd be able to write something like 'width: calc(100% + 16px)' and 'transform: translateX(-16px)' okay? Or is the thought that those are really edge case-y type things and I would write those without the utility classes? Yeah you can do this with tailwind using the arbitrary values thing. Some of that stuff would be covered by built-in classes. Occasionally if I'm making something really nifty like that I'll extract a class using tailwind's @apply syntax and then regular CSS for the special stuff. Tailwind is utility-first, not utility-only. The thing I like is that I don't need to come up with a name for every time I need a display: flex; align-items: center; type container. But you can absolutely jump back to normal CSS if you're doing a really complex grid layout or whatever, or you can just do it in the markup.
|
|
#
?
May 22, 2022 01:15
|
|
|
prom candy posted:Yeah you can do this with tailwind using the arbitrary values thing. Some of that stuff would be covered by built-in classes. Occasionally if I'm making something really nifty like that I'll extract a class using tailwind's @apply syntax and then regular CSS for the special stuff. Tailwind is utility-first, not utility-only. The thing I like is that I don't need to come up with a name for every time I need a display: flex; align-items: center; type container. But you can absolutely jump back to normal CSS if you're doing a really complex grid layout or whatever, or you can just do it in the markup. Yeah I remember seeing the @apply thing last time this came up, but the arbitrary values functionality is news to me. I guess I really need to try it in a personal project or something. I admit I feel compelled to poo poo all over it because I HATE Bootstrap and Foundation utility classes but you know, theres no one I know or ITT that has used it and done anything but gush over it.
|
|
#
?
May 22, 2022 02:11
|
|
|
fsif posted:Yeah I remember seeing the @apply thing last time this came up, but the arbitrary values functionality is news to me. Give it a try. When extracting components usually you want to start by creating Vue or React components that just have your utility classes in the markup. I mainly only reach for @apply if I need to do stuff that Tailwind isn't great at (although that list keeps getting shorter). If you find yourself writing BEM you probably want to re-examine. Adam Wathan also has some videos of him implementing layouts and designs with Tailwind, if you take a look at those you'll probably find it pretty convincing.
|
|
#
?
May 22, 2022 14:52
|
|
|
Also if you'd like a bit more structure I'll link to Headless UI which is a set of components for React/Vue by the Tailwind developers which can help you fill in some UI gaps or help homogenize your designs. https://headlessui.dev/
|
|
#
?
May 22, 2022 22:49
|
|
|
lunar detritus posted:They keep adding click events to divs I'm working with a junior dev right now who never uses anchors for anything. Everything is a div with an onclick and it drives me crazy. I just do not understand it. e: regarding Tailwind it's hilarious how much energy some developers spend creating convoluted abstractions to avoid writing a couple lines of CSS. Like, I understand why some folks might find it appealing, but it (and frameworks like it) always feel like solutions in search of a problem. kedo fucked around with this message at 15:03 on May 23, 2022 |
|
#
?
May 23, 2022 14:53
|
|
|
kedo posted:I'm working with a junior dev right now who never uses anchors for anything. Everything is a div with an onclick and it drives me crazy. I just do not understand it. Please tell me you are calling this out on PRs every single time until he stops. If you can't think of any reasons he will listen to - accessibility is a big one. Screenreaders and such get actual semantic information from the markup, not just the content. But really - he shouldn't do it because it's the literal definition of reinventing the wheel. We already have an element that does that. He should use it. quote:e: regarding Tailwind it's hilarious how much energy some developers spend creating convoluted abstractions to avoid writing a couple lines of CSS. Like, I understand why some folks might find it appealing, but it (and frameworks like it) always feel like solutions in search of a problem. Tailwind is not a framework. And while it might looks suspiciously like inline styles, it is definitely not, and you are entirely missing what it does. Just use it. Everyone here who is complaining about it sounds just like me before I actually used it on something. I mean really used it. At least write a Todo app in whatever framework is your daily driver, styling only with Tailwind. For bonus points: do mobile and desktop versions. And watch as doing that magically becomes the easiest it has EVER been. Watch as you style your entire app without writing a single line in a css file, or even in a component style block. Now I will never use anything else, if I have anything to say about it. It was such a gamechanger I wonder why we ever did it any other way.
|
|
#
?
May 23, 2022 15:12
|
|
|
What's wrong with inline styles?
|
|
#
?
May 23, 2022 15:14
|
|
|
HaB posted:Please tell me you are calling this out on PRs every single time until he stops. If you can't think of any reasons he will listen to - accessibility is a big one. Screenreaders and such get actual semantic information from the markup, not just the content. But really - he shouldn't do it because it's the literal definition of reinventing the wheel. We already have an element that does that. He should use it. Oh, I absolutely am. I (think?) the problem he was trying to solve was that anchors aren't block elements by default, so using onclick on a div was a way to make an entire block-level container clickable. There are like a thousand other ways to solve that problem while still using anchors, but div onclick was apparently just easier? Practically nothing he codes is keyboard accessible by default.  HaB posted:Tailwind is not a framework. And while it might looks suspiciously like inline styles, it is definitely not, and you are entirely missing what it does. Yeah I understand it in theory, at least. I've done a fair amount of research into it and considered it on a few projects. I have admittedly not used it, but I'm an old curmudgeon who is working on far too many projects at once and I am resistant to trying the new hot thing because I don't have time to experiment and have been burned far too many times in the past. I do have a personal project I could try it on I suppose, but let me have my dumb opinion and don't argue with me! :P My main thing is that I've been writing CSS/LESS/SCSS for so long that I simply don't find it difficult or time consuming to style things. I like the level of control and code separation CSS provides, and I like being able to see and edit the code I'm writing directly whenever possible. I've watched a fair number of videos about it and eventually it seems the person in the video will always say something like, "and then if you need to do [complicated one-off styles Tailwind can't support] you can always just write some traditional CSS" and then they end up creating a CSS file of some flavor to support their element, and I'm like, "I'm sorry, what? If you're going to write traditional CSS anyway then what is the point of scattering your styles across HTML and CSS?" Hence my "solution in search of a problem" comment.
|
|
#
?
May 23, 2022 15:28
|
|
|
Jabor posted:What's wrong with inline styles? No support for pseudo classes / media queries for one. They also don't compose very well. I maintain a decently large e-commerce site using Tailwind and we have like 5 separate CSS modules, each only a couple of lines, mostly to interface with third party modules. I would say using @apply for your own stuff is an anti-pattern. Using Tailwind to create BEM style CSS classes like somebody mentioned is something that belongs in the WTF thread. Even if you are not reusing components, having the styles inline and compact (because the classnames are short) makes it very easy to review in my opinion.
|
|
#
?
May 23, 2022 16:37
|
|
|
I think I've used Tailwind with styled-components in the past, that seems like a really good way to use the raw Tailwind utility classes and also help build good reusable components in React w/ Tailwind imo. But I find it helps if you get into that pattern that as soon as you start reusing classes you refactor it into a new component. Even if it's a little guy like: JavaScript code:
|
|
#
?
May 23, 2022 17:55
|
|
|
So say I have a pretty simple React appone where you go through a short survey and are given a recommendation at the end. I don't care about SEO or things being server side generated or really routing. If I know this app is going to be accessed almost exclusively on mobile devices with varying connection speeds, is there still a benefit in using Next.js over just a simple Vite/React build? Like, if the code is statically or server side generated, will it load more quickly or be more performant than just loading everything on the client? Or would the differences be largely negligible? Or any other considerations I'd need to account for?
|
|
#
?
May 29, 2022 18:06
|
|
|
if you don't need the interactivity/dynamic characteristics of spas i'd say don't use a fe framework at all
|
|
#
?
May 29, 2022 18:07
|
|
|
Okay but I do need React. It's marginally more complex than I've laid out.
|
|
#
?
May 29, 2022 18:34
|
|
|
I havent really touched next that much but the little I have has been very simple. For me it would depend on how you plan on hosting it.
|
|
#
?
May 29, 2022 22:34
|
|
|
fsif posted:So say I have a pretty simple React appone where you go through a short survey and are given a recommendation at the end. I don't care about SEO or things being server side generated or really routing. Just building your JS/CSS/HTML in advance and serving it will have the same benefits as statically generating a page in Next.js. The code will not be more performant, but it will start to load more quickly. Vercel as a hosting platform does some great stuff on top of next.js. In theory any serverless hosting platform can do what they're doing, but none of them are doing it as well.
|
|
#
?
May 29, 2022 23:09
|
|
|
Just use Next. It's simpler than a Vite build unless you have a need a custom config (ie, focus on your app logic not the build tooling, unless necessary), The boilerplate is pretty good JS: code:code:
|
|
#
?
May 30, 2022 00:38
|
|
|
fsif posted:So say I have a pretty simple React app—one where you go through a short survey and are given a recommendation at the end. I don't care about SEO or things being server side generated or really routing. I would consider not using a big framework like react for a "pretty simple" quiz app/widget. Unless this is a stand alone thing id start by asking what the existing front end stack looks like? Has there been any similar projects at your company that you could leverage or reference?
|
|
#
?
May 30, 2022 07:48
|
|
|
You can always do lazy imports in a React SPA to split up your bundle size. Next does give you bundle splitting automatically. Remix is a newer entrant into the space but I've enjoyed the DX a lot more than working with Next so that's another option to consider. You should definitely use React or another front end library for almost everything interactive because rolling your own poo poo with vanillaJS will slow you down significantly, assuming you're a competent React developer and don't normally work in vanilla JS. Netlify offers free and fast hosting for SPAs. Vercel is good for Next and I think Remix now too.
|
|
#
?
May 31, 2022 23:54
|
|
|
prom candy posted:
Alternatively, don't be the guy using react for everything interactive. Frontends passionately over-engineering poo poo is the single worst thing in webdev
|
|
#
?
Jun 1, 2022 20:39
|
|
|
Jimlit posted:Alternatively, don't be the guy using react for everything interactive. Frontends passionately over-engineering poo poo is the single worst thing in webdev Actually the worst thing in webdev is senior backends thinking "oh it's just JS it's obviously easy" and then coming in and loving all my poo poo up!
|
|
#
?
Jun 1, 2022 20:43
|
|
|
camoseven posted:Actually the worst thing in webdev is senior backends thinking "oh it's just JS it's obviously easy" and then coming in and loving all my poo poo up! Like just to gently caress with you? Usually it's the CSS that gets the backend devs where I work. They are all super adorable and humble about it though.
|
|
#
?
Jun 1, 2022 20:54
|
|
|
Jimlit posted:Alternatively, don't be the guy using react for everything interactive. Frontends passionately over-engineering poo poo is the single worst thing in webdev Using a tool that makes the job way simpler is not over-engineering
|
|
#
?
Jun 1, 2022 22:14
|
|
|
React is a fantastic framework especially since the introduction of functional components. I'll use it for just about everything because I think it's amazing and I'm not apologizing for that.
|
|
#
?
Jun 1, 2022 22:25
|
|
|
https://alpinejs.dev is a neat alternative if you just want to add a sprinkle of interactivity.
|
|
#
?
Jun 1, 2022 22:38
|
|
|
Protocol7 posted:React is a fantastic framework especially since the introduction of functional components. I'll use it for just about everything because I think it's amazing and I'm not apologizing for that. React is amazing! Some of the projects I'm most proud of I've done in react. But if you are using it for everything you should apologize lunar detritus posted:https://alpinejs.dev is a neat alternative if you just want to add a sprinkle of interactivity. I love this.
|
|
#
?
Jun 2, 2022 00:13
|
|
|
I don't even know what point you are making other than contrarianism or trolling.
|
|
#
?
Jun 2, 2022 00:36
|
|
|
Yeah I am beginning to find the anti-framework takes tedious. There aren't just loads of client projects where saving the ~80 KB Next.js bundle size is a worthy trade off for the productivity lossesat least ones that can't made with a Squarespace or whatever. I'm doing work on a site right now that was built with 11ty because React was too "heavy" for the project. In the interest of avoiding React, the devs basically just created their own bespoke framework.
|
|
#
?
Jun 2, 2022 03:18
|
|
|
i feel like a pretty typical lifecycle is: learn react and fall in love with it -> get some experience under your belt and then start arguing that you shouldn't be reaching for react for every little thing -> get a few more years experience and realize that it literally does not matter, just use what is going to make your life (and your coworkers' lives) easier. At least that's the timeline on how I feel. at this point in my career, i'm a lot less nitpicky about code as long as the markup is logical and accessible and the business-logic has a nice top-down approach (and a few other things but those are some big ones).
|
|
#
?
Jun 2, 2022 03:27
|
|
|
This project is too small and simple to use a framework -> the project is a hit and we need to add a bunch of features to it -> gently caress
|
|
#
?
Jun 2, 2022 05:28
|
|
|
React itself advertises it as having "been designed from the start for gradual adoption, and you can use as little or as much React as you need." Heck, React itself technically isn't even a web framework until you pair it with react-dom (though that's a lovely argument for just about anything, so I digress). Obviously there's no one size fits all framework, but if I'm gonna choose one I'm gonna use the most widely supported one seeing as I already have experience with it and my peers are likely to as well.
|
|
#
?
Jun 2, 2022 16:36
|
|
|
The team I lead at work is all nlp/machine learning folks who do front-end stuff to the extent that they need to make things look pretty. So I have a webpack config and a starter structure for Vue projects and the super simple demoware projects are usually vanilla JS. Our backends are in Python and they're much more comfortable there. If the project blows up and gets popular, in the past management has just shunted it over to the solutions team and they've rewritten the non ML bits. So that's one way to do it too 
|
|
#
?
Jun 2, 2022 17:34
|
|
|
Protocol7 posted:Heck, React itself technically isn't even a web framework until you pair it with react-dom (though that's a lovely argument for just about anything, so I digress). I am curious what, if anything, React can be applied to which isn't the DOM.
|
|
#
?
Jun 3, 2022 00:29
|
|
|
Doom Mathematic posted:I am curious what, if anything, React can be applied to which isn't the DOM. react native is a thing
|
|
#
?
Jun 3, 2022 00:36
|
|
|
teen phone cutie posted:i feel like a pretty typical lifecycle is: I started with and still use Angular, then also use Vue. I'm really struggling with the learning, and especially falling in love with, React.
|
|
#
?
Jun 3, 2022 01:01
|
|
|
well just replace "react" with "front-end framework" then lol
|
|
#
?
Jun 3, 2022 02:26
|
|
|
The Merkinman posted:I started with and still use Angular, then also use Vue. I'm really struggling with the learning, and especially falling in love with, React. I started on AngularJS (before it was called that) did a bit of Angular 2, and finally arrived on Vue. I adore Vue. Its like all the good parts from React and Angular, with none of the poo poo. Vue was good as of v2, but the composition api just sends it into the stratosphere for me. Its sooooooo good. I have bounced off learning React on 3 different occasions. I absolutely hate it. JSX is so unreadable and just looks like incomprehensible mush to me. And whoever thought a multi line ternary operator was a good thing deserves a kick in the shin.
|
|
#
?
Jun 3, 2022 02:55
|
|
|
|
| # ? May 17, 2024 03:43 |
|
|
Vue is fine if you don't like React. I think they just appeal to different types of people. I've tried to learn it a couple times but it's not for me. The stuff that a lot of people hate about React is exactly the stuff that I like.
|
|
#
?
Jun 3, 2022 05:50
|
|