|
frogbs posted:Thanks, I think that clarifies things a bit. I'm going to try to find more recently updated tutorials that are more focused on what i'm doing (basically searching within a table). I think I just don't like looking at JSX, everything is co-mingled and my brain just stops because it looks like it shouldn't work. Yeah the React re-render magic does take some getting used to. I was lucky to grasp it pretty quickly due to already being familiar with D3. As for JSX, I think a lot of folks need to adjust to it. I found it really gross at first because it was in this not-quite-HTML uncanny valley. What helped me was thinking about it like a template literal (how we used to generate HTML in jQuery components) and also being pretty strict about using it only for display purposes, so mostly inserting child display components and writing HTML structure. I like it much better nowadays (except for the lone hanging closing angle brackets ugh I hate them), but I still don't like it for non-display purposes (I'm looking at you, React Router). prom candy posted:I usually use React for that kind of thing, so I'd have <Form.Section /> and <Form.Header /> Okay this makes a lot of sense and makes it sound way better and more sensible than the rest of the Internet would have me believe. I think an issue with the Tailwind value proposition (some officially but mostly from the community) is that there's a very lopsided ratio of words spent telling you why the old ways are bad/wrong and how separation of concerns is bs vs why Tailwind is good, what it's good for, and how to properly implement it to take full advantage of what it offers. It honestly sounds pretty fantastic for certain use cases and teams where rapid development/delivery is important and there is a highly componentized frontend architecture, but that message gets kind of buried by panacea/way of the future hype, rhetoric I personally find off-putting, and the community pushing not the best of practices (e.g. @apply abuse over proper componentization like you described). As for me, I tend not to break down components quite that much. I'm the sole frontend dev/designer/maintainer right now and also have ADHD so having so many small components/props/configurations gets overwhelming. It's easier for me cognitive-load-wise to lean more heavily on semantic markup for basic structural stuff so I can have components organized by functional role and compartmentalize the styling and more minor structural considerations and not worry about them until I go into styling/CSS zen mode. (And that's another reason why I'm really not into inline-esque/utility paradigms - I need my CSS zen time during which I dive into the stylesheets and make everything look perfect and do cathartic cleanup/consolidation/optimization.)
|
#
?
May 20, 2021 18:24
|
|
|
|
| # ? Jun 10, 2024 15:40 |
|
|
frogbs posted:Thanks, I think that clarifies things a bit. I'm going to try to find more recently updated tutorials that are more focused on what i'm doing (basically searching within a table). I think I just don't like looking at JSX, everything is co-mingled and my brain just stops because it looks like it shouldn't work. You can keep the JS within the markup as minimal as possible by shifting all handlers, calculations and logic into functions, so your markup section only really has function calls/references or basic variable injection (though you'll still probably need to return JSX Elements from those functions in some cases, e.g. the renderSquare function from that tutorial). Still though, I feel you especially since JS dogma for the longest time was 0 code in the markup (to the point of not even using the native onclick HTML attribute). If you're going to stick with React, you'll probably eventually get used to JSX, but there are other modern frameworks that have less co-mingling (though you in many cases you're still going to have some manner of variable injection, logic and looping in your templates, just using some syntax other than JS). Is your goal still to build that camera bag volume filtering app?
|
|
#
?
May 20, 2021 18:27
|
|
|
feel like people don't talk enough about how JSX just turning into function calls under the hood means that React is now (accidentally?) the most TypeScript-friendly view framework you can get if you want to type check your Vue templates: install a VSCode extension maintained by one overworked underpaid dude who is probably going to ragequit someday leaving a bunch of developers in the lurch, and god help you if you want to type check those templates as part of your build process, you better notice the errors in your editor or that poo poo is gonna make it to production because there's no CLI check available if you want to type check React: well the JSX transform is built into TypeScript because it took like 3 seconds to add to their compiler because it's just turning XML into function calls, and function calls are easy to type, so install the officially-maintained React typings and you are all set there are lots of things i like about Vue and Vue 3 is more TypeScript-friendly than ever, but JSX is just so ruthlessly efficient with this stuff it's hard to not be jealous
|
|
#
?
May 20, 2021 18:44
|
|
|
There is nothing magic about React and JSX. Every time your state changes the JSX is re-rendered. React has no idea what data in your state is linked to which element. The "magic" happens in the diff algorithm that simply looks at the old content and new content and surgically applies changes to the DOM. That's all it is!
|
|
#
?
May 20, 2021 18:52
|
|
|
marumaru posted:someone has to I use svelte and I like it. It's too good to deny it.
|
|
#
?
May 20, 2021 18:54
|
|
|
ynohtna posted:I use svelte and I like it. Unfortunately its goodness has nothing to do with its popularity, especially when it is competing with React, Angular and Vue in the same space.
|
|
#
?
May 20, 2021 18:56
|
|
|
React with Typescript is such a pleasant experience and it makes me want to use Typescript for everything. I've been using Swift a lot lately, which is also really nice but man Typescript has some handy features. Edit: I would like to try Svelte but yeah I'm just not gonna sink my time into learning something that doesn't seem to be taking off.
|
|
#
?
May 20, 2021 18:57
|
|
|
Queen Victorian posted:What helped me was thinking about it like a template literal (how we used to generate HTML in jQuery components) and also being pretty strict about using it only for display purposes, so mostly inserting child display components and writing HTML structure. Opinion: if your React code doesn't look like a regular template, you hosed up. Mixing Javascript* with HTML* in React is gross. If you need to define it in this file, do it outside the return, ffs. *i know
|
|
#
?
May 20, 2021 18:57
|
|
|
ynohtna posted:I use svelte and I like it. Svelte looks awesome, but I wish I could learn/play with it during work hours. It doesn't seem to be picking up speed.  Lots of React Believers thought that Vue wouldn't gain popularity because React was too big, but here we are, yet Svelte is still tiny.
|
|
#
?
May 20, 2021 18:59
|
|
|
marumaru posted:Lots of React Believers thought that Vue wouldn't gain popularity because React was too big, but here we are, yet Svelte is still tiny. I think the existence of Vue might be what's stopping Svelte from growing. There are a lot of people who take one look at React and say "no way, gently caress that" and now those people have Vue.
|
|
#
?
May 20, 2021 19:02
|
|
|
I loved JSX from the jump. What I hated most was all the class boilerplate and welp.
|
|
#
?
May 20, 2021 19:13
|
|
|
fsif posted:I loved JSX from the jump. What I hated most was all the class boilerplate and welp. Same, I had nothing but issues every time I tried those logic-less templates and javascript frameworks that wanted to shunt every little thing into three different files (looking at you, Ember).
|
|
#
?
May 20, 2021 19:18
|
|
|
Splinter posted:You can keep the JS within the markup as minimal as possible by shifting all handlers, calculations and logic into functions, so your markup section only really has function calls/references or basic variable injection (though you'll still probably need to return JSX Elements from those functions in some cases, e.g. the renderSquare function from that tutorial). Still though, I feel you especially since JS dogma for the longest time was 0 code in the markup (to the point of not even using the native onclick HTML attribute). If you're going to stick with React, you'll probably eventually get used to JSX, but there are other modern frameworks that have less co-mingling (though you in many cases you're still going to have some manner of variable injection, logic and looping in your templates, just using some syntax other than JS). Yeah, that seems like a pretty good first project so that's still my goal. I'm going to look at Vue next I think, just to see how that feels.
|
|
#
?
May 20, 2021 21:14
|
|
|
Anyone have any tips for messing with Google's dataLayer? I feel like I keep getting really inconsistent results adding events through dataLayer for Tag Manger and Analytics, where I set an event in JS, then set a Trigger and a Tag in GTM then set a goal in Google Analytics. Like half of my form submissions aren't captured and a bunch of onclicks aren't registered. Google's UI is TERRIBLE for arranging these things, wondering if there's a design pattern or something I'm missing.
|
|
#
?
May 20, 2021 21:18
|
|
|
frogbs posted:Yeah, that seems like a pretty good first project so that's still my goal. I'm going to look at Vue next I think, just to see how that feels. Yeah I think that is a good first project and relatively straight forward. Your state is just your W, H, D, which are updated via the onChange event from their corresponding inputs (and are probably initialized to 0, so you're volume stays 0 until the user has entered a value for all 3). You also have your constant array of bag data. Finally you have your display of bags (which maybe is just a simple list w/ each bag as a <li>, or maybe you have a lot of data for each bag and want to pass it to a Bag component to handle a more complex Bag representation). To get the display of bags, you'll map() your bag array to some JSX markup, e.g. bags.map(bag => <li>{bag.name}</li>) or if you have a separate Bag component bags.map(bag => <Bag data={bag} />). At this point, you're going to be always showing all the bags, so the final step for bag display is to first filter you bag array down to only bags that have a volume larger than your current state's volume prior to mapping the bags to display markup, e.g. bags.filter(bag => bag.volume >= w * h * d).map(bag => <Bag data={bag} />). Now, whenever your w, h or d state is updated, React will re-run the bag array filter and mapping with the new volume, automatically showing the new set of bags based on the new volume. It should ultimately be a pretty small amount of code that implements the functionality you describe. Implementing the same small project in multiple frameworks would be a good exercise to figure out what you like most.
|
|
#
?
May 20, 2021 21:55
|
|
|
VagueRant posted:Anyone have any tips for messing with Google's dataLayer? I feel like I keep getting really inconsistent results adding events through dataLayer for Tag Manger and Analytics, where I set an event in JS, then set a Trigger and a Tag in GTM then set a goal in Google Analytics. Like half of my form submissions aren't captured and a bunch of onclicks aren't registered. Do you have an example of how your events are set up? There are a million ways to screw yourself over with GTM / dataLayer stuff.
|
|
#
?
May 21, 2021 18:31
|
|
|
Man, I had no idea that WebGL and WebAssembly actually used GPU acceleration. I thought poo poo like TensorFlow.js would run entirely on the CPU. I have recently learned that I'm wrong about that, and having GPU-accelerated ML models in the browser is actually really freaking cool! Especially because I'm starting to move into aarch64 development and not having to rebuild everything into aarch64 binaries is certainly valuable to me. Also, a precursory apology for inadvertently contributing to the web-everything of today is probably in order... Macichne Leainig fucked around with this message at 18:55 on May 21, 2021 |
|
#
?
May 21, 2021 18:51
|
|
|
It’s rather limited support though, (edit) Just checking the the tensorflow github, and they're pushing everything. WebAssembly only just landed SIMD support on the CPU, but the team seem to be pushing WebGPU quite hard as well. In so much that GPU computation is getting the attention over actual rendering support. MrMoo fucked around with this message at 18:59 on May 26, 2021 |
|
#
?
May 21, 2021 19:11
|
|
|
Man what is up with the forums posters the last couple of days, several of my regular reading threads (this one included) have lots of crabby joes snipping at each other, is the lack of GPU's on the market and the crypto crash making everyone testy? On the topic of CSS, I agree that having a framework to build from really simplifies things until you get into specifics when building, definitely makes the prototyping and initial design phase super quick compared to hand rolling everything. I've used both Bootstrap and Foundation, and I like the default visual styling of Foundation over Bootstrap, but I like the Bootstrap helpers over Foundation any day. I'd like to have Bootstraps ease of use combined with the visual defaults of Foundation. Does that exist? ModeSix fucked around with this message at 02:52 on May 22, 2021 |
|
#
?
May 22, 2021 02:48
|
|
|
ModeSix posted:Man what is up with the forums posters the last couple of days, several of my regular reading threads (this one included) have lots of crabby joes snipping at each other, is the lack of GPU's on the market and the crypto crash making everyone testy? Sunspots or something? Now that you mention it, some normally very chill threads have gotten feisty over the last few days. On topic: The problem / issue with frameworks is that they try to cover all the bases for everyone, and that involves making choices that either make them very, very verbose, or very, very hard to use outside of their prescribed functions. Sometimes this is worth it, sometimes it is not. I generally find it is not, but I don't pretend my use-cases are everyone else's.
|
|
#
?
May 22, 2021 13:36
|
|
|
ModeSix posted:Man what is up with the forums posters the last couple of days, several of my regular reading threads (this one included) have lots of crabby joes snipping at each other, is the lack of GPU's on the market and the crypto crash making everyone testy? I thought this thread stayed pretty civil given that everyone who uses different tools than me is wrong.
|
|
#
?
May 22, 2021 14:48
|
|
|
I dunno but elsewhere but new Hampshire has been miserably hot so .have jgs the heat
|
|
#
?
May 22, 2021 14:48
|
|
|
Sir, I think you're having a strokejs
|
|
#
?
May 22, 2021 14:57
|
|
|
gbut posted:Sir, I think you're having a strokejs It's only a stroke it it's an SVG, otherwise it's a border
|
|
#
?
May 22, 2021 15:05
|
|
|
ModeSix posted:Man what is up with the forums posters the last couple of days, several of my regular reading threads (this one included) have lots of crabby joes snipping at each other, is the lack of GPU's on the market and the crypto crash making everyone testy? Lol probably my fault - I'd taken a day off work because the covid vaccine hosed me up and probably should have taken a couple days off from posting too.
|
|
#
?
May 22, 2021 15:50
|
|
|
Felt like the discussion was all civil and unusually informative, especially considering what a powder keg Tailwind discussion is on most corners of the Internet.
|
|
#
?
May 22, 2021 17:44
|
|
|
fsif posted:Felt like the discussion was all civil and unusually informative, especially considering what a powder keg Tailwind discussion is on most corners of the Internet. To be fair, 99% of discussions around tools like Tailwind are usually people bragging that they're using the coolest bleeding edge tools versus people who are bragging that they're too cool to use the coolest bleeding edge tools, and not a lot of nuance in between. Sure goons can be goony sometimes but especially in the programming threads I find most people usually have their heads on straight. If you guys were my coworkers I'd hold you guys in a lot less contempt (not a nonzero amount though, let's be realistic). Macichne Leainig fucked around with this message at 17:56 on May 22, 2021 |
|
#
?
May 22, 2021 17:54
|
|
|
Queen Victorian posted:Lol probably my fault - I'd taken a day off work because the covid vaccine hosed me up and probably should have taken a couple days off from posting too. I had mine about 3 weeks ago, and I tell you the first 2 or 3 days afterwards I felt like garbo.
|
|
#
?
May 22, 2021 20:19
|
|
|
lunar detritus posted:Angular is too big and unwieldy for most purposes. Vue is Angular really shines in large webApps tbh. Once you're goodish at it you'd be surprised how little code you end up writing in the end.
|
|
#
?
May 23, 2021 10:43
|
|
|
I need to tell the guy at work that wants to switch to Elm that we should switch to angular, and watch his head explode
|
|
#
?
May 23, 2021 14:08
|
|
|
dupersaurus posted:I need to tell the guy at work that wants to switch to Elm that we should switch to angular, and watch his head explode He'd be right to.
|
|
#
?
May 24, 2021 00:27
|
|
|
there are people who use jQuery with React.
|
|
#
?
May 24, 2021 00:29
|
|
|
Could one mix php and react?
|
|
#
?
May 24, 2021 00:50
|
|
|
Empress Brosephine posted:Could one mix php and react? We do. unfortunately I find that the PHP folks prefer to use Vue, though. To be fair it seems to be a better fit for the whole "progressive enhancement" thing.
|
|
#
?
May 24, 2021 00:53
|
|
|
Laravel opts for Vue for the front end, but we use react with it because we are... different. You can basically use whatever, the stream don't really cross.
|
|
#
?
May 24, 2021 01:53
|
|
|
Empress Brosephine posted:Could one mix php and react? You can add react to server-rendered templates yeah. I got my start with React adding it to Rails views but it didn't take long until I wanted to use it for everything
|
|
#
?
May 24, 2021 15:03
|
|
|
Empress Brosephine posted:Could one mix php and react? Works for Facebook and Slack, I guess.
|
|
#
?
May 24, 2021 15:46
|
|
|
We used to have a Spring Boot + Angular app, where the main html file was a template that Spring Boot injected the CSRF token into. That was kind of neat.
|
|
#
?
May 24, 2021 16:59
|
|
|
marumaru posted:there are people who use jQuery with React. JavaScript code:
|
|
#
?
May 24, 2021 19:23
|
|
|
|
| # ? Jun 10, 2024 15:40 |
|
|
marumaru posted:there are people who use jQuery with React. one of my very first SO questions was about how to do this when I was first learning React. And then obviously someone told me I was a dumb idiot
|
|
#
?
May 24, 2021 22:54
|
|
