|
Ruggan posted:Per the eslint docs, the only way to specify file extensions to lint is through the command line. Looking at the default setup after creating a new Vue project with the cli. It must be the plugin that's handling it. here's the relevant part from package.json: code:
|
# ? Mar 31, 2019 15:04 |
|
|
# ? Apr 27, 2024 16:00 |
|
HaB posted:Looking at the default setup after creating a new Vue project with the cli. It must be the plugin that's handling it. here's the relevant part from package.json: Nah, I already have the plugin installed. That helps parse the JS out of the single file components (pulls the JS from the .vue file - don’t want to parse the whole thing). The eslint-plugin-vue docs even specify that eslint needs to be run to include .vue files to work, and points at editor integration to do this automatically. Most front-end editors have editor-specific config that allow you to specify how eslint works, but not Visual Studio Pro. https://eslint.vuejs.org/user-guide/#editor-integrations
|
# ? Mar 31, 2019 15:15 |
|
Grump posted:yeah I saw some React folks complaining about the TypeScript definition names and they must have changed it recently? I'm not sure what happened there. I'm just now getting back up to speed with TS after not using it in any projects for a year or so. I would like to know why the change though. Either I haven't searched very well or there doesn't seem to be a good official place documenting all the React TS types. That github repo documenting React+TS best practices I linked earlier works pretty well though.
|
# ? Mar 31, 2019 17:04 |
|
Thermopyle posted:I'm not sure what happened there. I'm just now getting back up to speed with TS after not using it in any projects for a year or so. I think a couple weeks ago I saw Dan Abramov and folks basically saying on Twitter, “they’re not called stateless functional components. Stop calling them that!!!” in response to the naming convention of the typescript definitions E: thread here explains https://twitter.com/dan_abramov/status/1057625147216220162?lang=en teen phone cutie fucked around with this message at 17:17 on Mar 31, 2019 |
# ? Mar 31, 2019 17:14 |
|
Yeah it's because with hooks functional components can now be stateful, so SFC doesn't make sense as the type name for non-class components.
|
# ? Mar 31, 2019 18:33 |
|
evilfunkyogi posted:Yeah it's because with hooks functional components can now be stateful, so SFC doesn't make sense as the type name for non-class components. They switched to calling them "function" components instead of "functional" as well because the hook stuff I guess makes them not truly functional or something I dunno I don't have a CS degree
|
# ? Apr 1, 2019 15:02 |
|
prom candy posted:They switched to calling them "function" components instead of "functional" as well because the hook stuff I guess makes them not truly functional or something I dunno I don't have a CS degree I dunno, I think it just makes more sense to call them function components given that's what they are, calling em "functional" just seems a bit opinionated. Hooks seem to basically be algebraic effects afaics from skim reading this paper that is the first result on Google, and they're functional things, but I also do not have a CS degree so
|
# ? Apr 1, 2019 23:32 |
|
The Cavern of COBOL > Modern front-end development: I also do not have a CS degree
|
# ? Apr 2, 2019 00:00 |
|
Scaramouche posted:The Cavern of COBOL > Modern front-end development: I also do not have a CS degree The Cavern of COBOL > Modern front-end development: Does ignorance of history mean we are doomed to repeat the mistakes of the past for all eternity?
|
# ? Apr 2, 2019 00:12 |
|
Anyone have a React table component that they like? Responsive, sortable, etc. I might just write my own, but I want to see some good options first.
|
# ? Apr 2, 2019 00:33 |
|
Thermopyle posted:Anyone have a React table component that they like? I'm curious to hear what you pick and how it goes; I've rolled my own in the past but it sucked and was 99% boilerplate. I saw https://www.zinggrid.com and https://handsontable.com come up in the context of paid-usage libraries recently, both looked neat if you can drop the money (or have a noncommercial project). Handsontable particularly looks great and if I ever have a "make a giant CRUD app with complex needs" project at my current company I think there's a decent chance we throw money at it. There's also a community edition based on the last version before they made a license change that might do what you need. I'm curious how those projects end up doing, though; per-seat licenses seem really hard to keep up with even in organizations that would like to properly adhere to the license terms, and literally impossible to actually enforce on their end unless there's like a hosted service to go with it.
|
# ? Apr 2, 2019 01:17 |
|
Thermopyle posted:Anyone have a React table component that they like? I've poked around (though not specifically in React, and not terribly in depth) and didn't see anything that worked the way I wanted it to - they all had deal-breaking limitations and/or sucked. I've been tinkering with Crossfilter.js + D3 to roll my own interactive table solution for large data sets. Crossfilter sorts/filters data, a dumb D3 table displays it (and emits click events when headers for sortable columns are clicked), and a pagination widget emits array slice indices based on your page position so the table can be told which slice of the data array to draw. What I wanted to get away from was having the data be intertwined with and locked to the presentation (gently caress you, DataTables). Having the data/data manipulation be totally independent from how it's presented makes everything SO much nicer, and worth learning Crossfilter and building all this poo poo from scratch. I think it would be pretty easy to make React component versions of the table (which is super dumb and basic) and paginator (most of which is logic, so it'd just need a new template), and Crossfilter doesn't care because it doesn't touch the display at all. I'm also working to extend this table/paginator combo to work with page-by-page queries for when Crossfilter isn't feasible. P.S. I've started an online React course and I so far like it a lot except that part where it wants to throw a wench into my D3 paradigm and its components are pretty similar to where we've been going with ES6 classes, so it's not even that unfamiliar. JSX is kinda weird though - it's in this uncanny valley of being almost the same as HTML but sets off all my wrongness triggers with the camel case and component-names-as-tags. I guess I'll get used to it.
|
# ? Apr 2, 2019 04:49 |
Thermopyle posted:Anyone have a React table component that they like? http://schrodinger.github.io/fixed-data-table-2/example-object-data.html I am using Fixed Data Table 2, which is a continuation of an abandoned Facebook project. It requires you to plug in your own sorting and filtering functions, which I like because it means I'm not limited to whatever built-in functionality comes with the package.
|
|
# ? Apr 2, 2019 08:08 |
|
abraham linksys posted:I'm curious how those projects end up doing, though; per-seat licenses seem really hard to keep up with even in organizations that would like to properly adhere to the license terms, and literally impossible to actually enforce on their end unless there's like a hosted service to go with it. I seem to remember there used to be JS packages where you had to include the version from the vendors site and the url had a unique key so it could only be used from your particular urls but I don’t know how they would adapt that to an npm / webpack world.
|
# ? Apr 2, 2019 11:25 |
|
Queen Victorian posted:P.S. I've started an online React course and I so far like it a lot except that part where it wants to throw a wench into my D3 paradigm and its components are pretty similar to where we've been going with ES6 classes, so it's not even that unfamiliar. JSX is kinda weird though - it's in this uncanny valley of being almost the same as HTML but sets off all my wrongness triggers with the camel case and component-names-as-tags. I guess I'll get used to it. JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use. fwiw I would recommend exploring React hooks early in your learning, React really feels designed with a more functional programming approach in mind and hooks let you embrace that. basically you can write components entirely as functions, no more classes needed. I read once that "React imagines UI as pure functions of state" and I thought that sounded about right. Classes are not going anywhere though so don't feel like you have to move to hooks anytime soon, I've just found that everyone I know who has started using them really likes them (including myself). especially if you're like me and don't really care for classes in JS at all.
|
# ? Apr 2, 2019 20:52 |
|
RobertKerans posted:The Cavern of COBOL > Modern front-end development: Does ignorance of history mean we are doomed to repeat the mistakes of the past for all eternity? The Cavern of COBOL > Modern front-end development: I have a CS degree, but I'm using it to write CSS.
|
# ? Apr 2, 2019 20:54 |
|
my bony fealty posted:JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use. Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that.
|
# ? Apr 3, 2019 00:19 |
|
I've actually been considering doing a start to finish full react tutorial. I started using it over 3 years ago and I just kind of picked things up as I went along. With all the major changes lately, doing a full tutorial might help me to see how everything fits together as a whole rather than seeing how I could bolt on new features as though they were separate, which is kind of what I've been doing. Been considering waiting until context gets further along because it's gonna be rad, but who knows how long that will be.
|
# ? Apr 3, 2019 00:43 |
|
Gildiss posted:Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that. The official docs seem fine to me.
|
# ? Apr 3, 2019 00:47 |
|
Do you redux fans use connected-react-router for your routing needs? I’m replacing react-router with it to combat an issue I had with a component double-firing when I clicked a Link component (and the change in route params also kicked something into gear) but now I’m wondering if it’s worth it since I can think of another way to solve the problem.
|
# ? Apr 3, 2019 03:51 |
|
Hed posted:Do you redux fans use connected-react-router for your routing needs? I use redux-first-router when I use redux and I love it. https://github.com/faceyspacey/redux-first-router Speaking of routing, I'm working on a project that's too small for Redux (and might not get that big for a long time) and I have an aversion to react-router and was wondering what others are using if they are using something else!
|
# ? Apr 3, 2019 13:44 |
|
Reach router is good an v accessible, meaning that it focuses on the changed content when you change routes It was made by the guy who wrote react router
|
# ? Apr 3, 2019 13:56 |
|
Gildiss posted:Do you have a good starting guide for hooks? There are so goddamn many and I don't trust any of them due to that. The official docs are good. Kent C. Dodds' video tutorial on egghead is good, I think you need an account but it should be free. I also haven't watched it yet but the other day Dan Abramov and MPJ did a livestream where Dan taught MPJ hooks from scratch: https://www.twitch.tv/videos/404530952?t=00h14m17s Hooks are so goddamn good I love them.
|
# ? Apr 3, 2019 14:18 |
|
Grump posted:Reach router is good an v accessible, meaning that it focuses on the changed content when you change routes Oooh, I like it. Still wish I could use redux-first-router, but without redux, it don't work so good....
|
# ? Apr 3, 2019 14:20 |
|
my bony fealty posted:JSX is weird but you definitely get used to it. I like it more as a templating solution than the directives that most other FE frameworks seem to use. quote:fwiw I would recommend exploring React hooks early in your learning, React really feels designed with a more functional programming approach in mind and hooks let you embrace that. basically you can write components entirely as functions, no more classes needed. I read once that "React imagines UI as pure functions of state" and I thought that sounded about right. I would describe our shop's programming paradigm as event-based OOP. Boss likes it, and my intro to programming was Java, so I'm happy with it (and was excited when we got to start using ES6 classes instead of awkward old-JS functions masquerading as classes), so I have a feeling we'll be sticking with React classes for the time being. (Though if I'm writing a quick little PHP widget to take some data and poo poo out a CSV or something, I'll do it procedurally.) Hooks don't come up in my online course until later (and the instructor is a pro-class guy), but I'll try to do some reading on them beforehand. I read React's article on them and am intrigued but don't think I quite get them - are they at all like Wordpress hooks? That's like the one hook system I've used and understand, but I'm not sure how consistent the term "hook" is, so I could be completely off base in my comparison (which wouldn't surprise me because I'm a total React noob and also one of those BFA programmers).
|
# ? Apr 3, 2019 14:48 |
|
Queen Victorian posted:...ES6 classes instead of awkward old-JS functions masquerading as classes)... For the record, es6 classes are STILL awkward JS functions masquerading as classes. Don't let the syntactic sugar fool you.
|
# ? Apr 3, 2019 15:20 |
|
HaB posted:For the record, es6 classes are STILL awkward JS functions masquerading as classes. Don't let the syntactic sugar fool you. Oh, I'm well aware, but now the game of pretend is so much more pleasant. Prototypal inheritance still fucks with me, though. If I want to do actual classes and class inheritance, then I have to make an excuse to write something in PHP (which is only for side projects, not a part of our main stack).
|
# ? Apr 3, 2019 15:47 |
|
Queen Victorian posted:I'm at the point where I'm whiplashing between "It's awesome!" and "It's gross!" but either way it's pretty convenient. Though I did do a bunch of pondering on why I couldn't just use a template literal, but I figure the ReactDOM and async have something to do with that. I came into React with philosophical issues with JSX and embedded templates but, really, it's fine in practice and probably going back to templates would be rough
|
# ? Apr 3, 2019 16:05 |
|
Lumpy posted:I use redux-first-router when I use redux and I love it. https://github.com/faceyspacey/redux-first-router I also use redux-first-router for any SPAs that use redux.
|
# ? Apr 3, 2019 16:59 |
|
What’s the pro of using redux router when react router provides the withRouter HOC?
|
# ? Apr 3, 2019 19:22 |
|
Grump posted:What’s the pro of using redux router when react router provides the withRouter HOC? Because the way redux-first-router works is intuitive and smart, and ALL your state is in redux, your navigation is dispatching actions, and doing stuff like protecting routes is incredibly easy. Plus I really dislike the way React Router works / renders / does just about everything.
|
# ? Apr 3, 2019 20:52 |
|
JSX is much easier to deal with if you have an IDE / editor that has good support for it.
|
# ? Apr 3, 2019 20:54 |
|
Hed posted:Do you redux fans use connected-react-router for your routing needs? That's just a library which syncs your existing react router state with redux. You may be better off investigating your double firing issue as you have several levers at your disposal w/React to skip renders. I looked into redux-first-router, but it seems his full fledged redux based router as his @next (rudy, i think) has never materialized after over a year of talking about it being just around the corner. It doesn't seem like faceyspacey has the traction or will to stick with something long term.
|
# ? Apr 3, 2019 21:06 |
|
Ahz posted:That's just a library which syncs your existing react router state with redux. That’s fair, but at the same time, what exists is amazing, so it’s not like you need to wait for some future thing to use it.
|
# ? Apr 3, 2019 22:13 |
|
Hey bros. Are there any gotchas for setting the text of input elements, using javascript DOM manip? (Presumably applies to textarea as well). Ie, what could cause this? This implies it's not simply the value attribute, nor is it a text node. edit: Fixed. Must use setValue in this case, instead of/in addition to setAttribute. Appears the value state is subtly different from the value attr. Dominoes fucked around with this message at 04:51 on Apr 4, 2019 |
# ? Apr 4, 2019 04:17 |
|
prom candy posted:The official docs are good. Kent C. Dodds' video tutorial on egghead is good, I think you need an account but it should be free. I also haven't watched it yet but the other day Dan Abramov and MPJ did a livestream where Dan taught MPJ hooks from scratch: https://www.twitch.tv/videos/404530952?t=00h14m17s Started with the twitch last night and then jumped into the docs and prom candy posted:Hooks are so goddamn good I love them.
|
# ? Apr 4, 2019 15:18 |
|
[question already answered] sorry
|
# ? Apr 4, 2019 15:53 |
|
Hey guys, I had the displeasure of learning that "CSS in JS" is a thing the other day. It's one of the more abominable newfangled front-end things I've come across in my React/new front-end tech learning journey so far. Just... why?? We were evaluating React-based UI component frameworks (to replace our motley shitpile of jQuery-UI/bootstrap-plugin/random third-party/homegrown UI widgets with a unified system), and Material-UI was looking mighty nice (had all the complements we wanted and looked good, etc), but then I looked at means of styling customization and saw that they used JSS. Read into it and then removed Material-UI from consideration because I don't want to "compile" CSS from some stupid JS syntax and then be unable to diagnose display issues from looking at the output because all the classes are machine-generated gibberish. I guess it could have been worse - at least they weren't using the inline-style implementation. It seems to me that this system was invented/is advocated by non-design JS fans who want to do absolutely everything in JS and lack fundamental understanding of CSS and why it works the way it does (global namespace and cascading, the horror!). Also, being a designer, I find all the abstraction a detriment to my process and understanding. If I write some HTML templates, I like having the output be the same as what I wrote so it's easy to examine and test with dev tools (this is why I'm coming to like JSX - very low abstraction).
|
# ? Apr 5, 2019 16:19 |
|
It's a combination of "everything needs to be built in javascript" and a lot of people not liking CSS. The parts of CSS they don't like though aren't going to be solved by putting it into javascript it'll only introduce new headaches, I'm with you brother/sister.
|
# ? Apr 5, 2019 16:28 |
|
|
# ? Apr 27, 2024 16:00 |
|
Queen Victorian posted:Hey guys, I had the displeasure of learning that "CSS in JS" is a thing the other day. It's one of the more abominable newfangled front-end things I've come across in my React/new front-end tech learning journey so far. Just... why?? I wasn't into it at first either, but it also means that I don't have to fuss with SASS/LESS and weird import mechanisms. It also lets you customize component styles much more easily than hoping you were specific enough to override some other styles elsewhere. The name mangling only happens when you do a production build - they're all named after the React components they're styling in development mode. If you look at the component style overriding options for Material-UI, you'll see some of the power you get with very little work. And, yeah, Javascript has permeated into everything, but React being married to a Javascript styling system - especially when it all works out of the box with Typescript - is pretty incredible and has saved me a lot of effort over the last year or two.
|
# ? Apr 5, 2019 16:31 |