|
Tei posted:yes? Unfortunately this is true. You can also wait for it to load from outside the frame if it's on the same domain then check the height. I tried to do it a little while ago setting height and this was my final solution but it still screws up occasionally. code:
|
# ? Mar 7, 2019 16:13 |
|
|
# ? May 16, 2024 11:40 |
|
Reposting since because sniping: Of course, ignore the last post! I already have a resizeFrame function in the onload of the iframe body. So I guess what I'm actually wondering is how I can investigate why it isn't being called (which I checked)?
|
# ? Mar 7, 2019 16:20 |
|
Someone posted a bit about it on the last page but has anyone built anything with Tailwind? I hated utility-first CSS when I tried it a few years ago, but I think part of that was people kept lazily loving with the utilities, so the text-red class would also add 5px of bottom margin. That's when I switched over to using BEM and now I'm using styled-components with React, but the pain point of that is having to come up with names for everything, or constantly writing components that are just display: flex and align-items: center.
|
# ? Mar 8, 2019 16:00 |
|
prom candy posted:Someone posted a bit about it on the last page but has anyone built anything with Tailwind? I hated utility-first CSS when I tried it a few years ago, but I think part of that was people kept lazily loving with the utilities, so the text-red class would also add 5px of bottom margin. That's when I switched over to using BEM and now I'm using styled-components with React, but the pain point of that is having to come up with names for everything, or constantly writing components that are just display: flex and align-items: center. This morning I'm trying to select a styling solution for the React app I started a few days ago. How do you feel about using styled-components?
|
# ? Mar 8, 2019 17:01 |
|
Thermopyle posted:This morning I'm trying to select a styling solution for the React app I started a few days ago. Coming from BEM and SASS before I like it quite a bit. Co-locating my styles inside my react component makes a lot of sense, and it makes it pretty easy to do common stuff like changing how something looks based a component's props or state. It's also better than BEM in that if you stop using a style you created your linter will yell at you so you're never pushing dead CSS. The problems are similar to BEM in that you end up creating a ton of styled components with dumb names like TopArea just to set display: flex on them. They've added the css prop which is nice because you can kind of inline your styles in those cases, but in that case I'm more interested in something like Tailwind because I think I'd much rather have code:
code:
|
# ? Mar 8, 2019 17:58 |
|
Thermopyle posted:This morning I'm trying to select a styling solution for the React app I started a few days ago. My criteria for evaluating style stuff is: To I have to write code to handle :hover and other things like that. If I do, forget it. IIRC styled-components does not make you, so it has my blessing. That said, I still like class names with SASS.
|
# ? Mar 8, 2019 18:01 |
|
style-components has a lot of stuff that SASS users will appreciate, like descendant selectors, &:hover shorthand, etc. I can't think of anything I used to do in SASS in that I can't do in styled-components.
|
# ? Mar 8, 2019 18:18 |
|
https://twitter.com/thomasfuchs/status/1103700462107164672
|
# ? Mar 8, 2019 19:35 |
|
|
# ? Mar 8, 2019 19:47 |
|
Reminder that nothing we achieve will ever come close to what she's achieved
|
# ? Mar 8, 2019 19:48 |
|
Thanks to all the good programmers out here. Both men and women. But specially womens, since today is their day.
|
# ? Mar 8, 2019 19:56 |
https://twitter.com/TobiM/status/1103796011036753921
|
|
# ? Mar 8, 2019 19:57 |
|
Thermopyle posted:This morning I'm trying to select a styling solution for the React app I started a few days ago.
|
# ? Mar 8, 2019 20:10 |
|
Thermopyle posted:This morning I'm trying to select a styling solution for the React app I started a few days ago. It's good, but also use something like rebass so you can just do stuff like <Flex flexDirection="column"> for simple cases. CSS-in-JS is also a million times easier than other tools I've seen if you ever do dynamic theming stuff.
|
# ? Mar 9, 2019 22:05 |
|
Can we developers team up with sys admins to stop the vicious cycle of IE support? We support IE because people use it, people use IE because it's supported, we support IE because people use it... As far as the site I manage is concerned, the majority of it from people at work. I thought maybe with the death of Windows 7 in less than a year, it'd be much better, but no. Almost half the visits from IE are from Windows 10! You have to go out of your way to use IE over Edge in Windows 10.
|
# ? Mar 12, 2019 21:36 |
|
prom candy posted:Someone posted a bit about it on the last page but has anyone built anything with Tailwind? I hated utility-first CSS when I tried it a few years ago, but I think part of that was people kept lazily loving with the utilities, so the text-red class would also add 5px of bottom margin. That's when I switched over to using BEM and now I'm using styled-components with React, but the pain point of that is having to come up with names for everything, or constantly writing components that are just display: flex and align-items: center. I've never been bothered by this because you can either 1) write a base styled component with the reusable style and extend it or 2) just add a class to it. or heck just reuse the same styled component all around your project if you want, if it really is just the same rules over and over, just export it. the thing about styled-components is that not everything has to be a styled component, which saves having to write out each individual tag as a component. if you need a div just use a div and if it needs a rule style it from its parent. if you do this too much it gets messy and can gently caress with scoping yes but those are just problems inherent in css. also with createGlobalStyle now it's viable to set up some utility classes that your whole tree has access to. I guess injectGlobal could've done this before too but its easier now. my bony fealty fucked around with this message at 03:27 on Mar 13, 2019 |
# ? Mar 13, 2019 03:16 |
|
prom candy posted:I haven't actually used an utility-first CSS system though and I always suffer from grass-is-greener syndrome so I'm sure if I had started with that and was using it on my 500+ component project I'd probably be looking longingly at styled-components instead because scale is hard no matter what. In terms of picking a library, I'm not sure if I would pick styled-components over Emotion right now. They constantly go back and forth between being the most performant, and it seems like their syntaxes are similar enough that you could easily swap one out for the other. I like those two over the other CSS-in-JS solutions because I like sticking with actual CSS syntax instead of javascript object syntax. It makes it a lot easier to copy and paste code from older projects or a codepen or whatever. The one other issue I've had with styled-components is it's kind of a pain to use with Typescript. I've ended up really abusing type asserting styled-components to "any" because the DX to properly type your add-on props is pretty atrocious. I'm not sure if Emotion is any better in that regard. I recently looked into setting up or using a utility-first css setup to put in a style guide into a fairly large existing app thats just a nightmare of redundant styling. I would highly recommend against it if you do any sort of complex responsive stuff, otherwise you end up with divs that look like this, all over. code:
I have a bunch of style guide sass partials that spit out a bunch of classnames you can use sass extend on to apply to your components stylesheet, ends up something like this (React focused) code:
ddiddles fucked around with this message at 04:14 on Mar 13, 2019 |
# ? Mar 13, 2019 04:11 |
|
So I've been going through the Zenva tutorials to buff my portiolio and I've just finished React and I was wondering. At what point in the workflow should the state data be managed? Like say for argument's sake, I have a list json object that has an order field that is supposed to sort the list from 1 upwards. Would I do that in the fetch code (by having the api sort it for me before sending it something like api.com?sort='field') or would I do it in code somehow? Sorry for cackhanding any terms, new to fullstack.
|
# ? Mar 13, 2019 10:27 |
|
I'm sorry my terminology is probably out of date I haven't used react in a while, but rather than have my api sort data I'd do it client side. I'd only make api requests when the data changes and I'd use a selector that returns values in sorted order.
|
# ? Mar 13, 2019 11:23 |
|
So have the quiery make the API serve the data pre-sorted. OK Thanks.
|
# ? Mar 13, 2019 11:34 |
|
But that's the opposite of what I said.
|
# ? Mar 13, 2019 16:50 |
|
Nolgthorn posted:rather than have my api sort data I'd do it client side. This will work fine until you have too many items in your list that you need to page the data. Consider your specific scenario when making these decisions.
|
# ? Mar 13, 2019 17:11 |
|
Nolgthorn posted:But that's the opposite of what I said. Sorry, Misread that comment.
|
# ? Mar 13, 2019 18:48 |
Opulent Ceremony posted:This will work fine until you have too many items in your list that you need to page the data. Consider your specific scenario when making these decisions.
|
|
# ? Mar 13, 2019 19:49 |
|
my bony fealty posted:I've never been bothered by this because you can either 1) write a base styled component with the reusable style and extend it or 2) just add a class to it. or heck just reuse the same styled component all around your project if you want, if it really is just the same rules over and over, just export it. Yeah, I have created a few utility classes already. For whatever reason I've mostly avoided using className selectors within a styled component but I guess there's really no reason for that. Although if I'm adding classnames that still doesn't solve the other problem of having to come up with names for everything. I do use descendent selectors sometimes but I almost always stick to using direct-child selectors because anything else just gets real sketchy in a large app. It's definitely possible that I have just been making far too many styled components though. ddiddles posted:I recently looked into setting up or using a utility-first css setup to put in a style guide into a fairly large existing app thats just a nightmare of redundant styling. That classname soup on the div is absolutely disgusting for sure, but I think what you've done in terms of mixing a bunch of stuff in is also possible with Tailwind using the @apply directive, so it's kind of two sides of the same coin. I also find reading that classname soup shorthand way harder than just reading CSS, but I think that also comes along with learning the tool itself, because I also find reading your @extends pretty difficult and I think that's only because it took me a second to understand your naming convention. I guess the reality is we're dealing with complexity and it has to go somewhere.
|
# ? Mar 13, 2019 23:46 |
|
Client side sorting and filtering and pagination is really great and slick for smaller data sets. Do that if it’s feasible. However, realistically, in most enterprise applications, you’re going to need to paginate / filter / sort on the server - ideally in the database to minimize I/O and data sent between database and server. Main reasons you might need to do it server side: - high concurrency - unless you have a near-real-time webhook setup, you will want to requery to get updates, otherwise the client will quickly become out of date - lots of data - browsers may choke on the load of data, just gotta test I’m sure there are more.
|
# ? Mar 13, 2019 23:47 |
|
Use GraphQL, that way your pagination stuff is part of the settings of the client-side queries.
|
# ? Mar 14, 2019 05:14 |
|
Use GraphQL because it's sweet and looks good on a resume
|
# ? Mar 14, 2019 05:21 |
|
prom candy posted:Use GraphQL because it's sweet and looks good on a resume Also, it's nice to do literally all data retrieval and handling declaratively so you never have to worry about component lifecycle stuff again.
|
# ? Mar 14, 2019 06:07 |
|
prom candy posted:That classname soup on the div is absolutely disgusting for sure, but I think what you've done in terms of mixing a bunch of stuff in is also possible with Tailwind using the @apply directive, so it's kind of two sides of the same coin. I also find reading that classname soup shorthand way harder than just reading CSS, but I think that also comes along with learning the tool itself, because I also find reading your @extends pretty difficult and I think that's only because it took me a second to understand your naming convention. I guess the reality is we're dealing with complexity and it has to go somewhere. Ah yeah, I initially went with the short class names just because I was sticking them in the template, but with setup you could make your class names more semantic.
|
# ? Mar 14, 2019 07:16 |
|
Opulent Ceremony posted:This will work fine until you have too many items in your list that you need to page the data. Consider your specific scenario when making these decisions. I still sort client side, but retrieve the data again when scope changes. So I navigate to page 2, it displays page 2 at the same time that it's fetching page 2. Actually now you've made me self conscious about it, I think it depends on how complicated your sorting is. But the key is you're still storing client side whatever data they've looked at already. How much data can I store client side anyway.
|
# ? Mar 14, 2019 11:19 |
|
Sorting things is the job of a database engine. Sorting things clientside can sometimes be the correct decision, but are exceptions.
|
# ? Mar 14, 2019 12:19 |
|
Nolgthorn posted:I still sort client side, but retrieve the data again when scope changes. So I navigate to page 2, it displays page 2 at the same time that it's fetching page 2. Actually now you've made me self conscious about it, I think it depends on how complicated your sorting is. the limit client side is pretty much how much memory you can use (unless you're talking about 'store' in a localstorage sense). sorting on the client side with javascript is actually pretty fast too, even complicated sorts with thousands of records will happen relatively fast. the biggest problem with having an api not paginate is that performance/scalability of the api will be much lower if you don't paginate - the db will have to return the entire resultset, api has to serialize it and send it over the wire, and then it has to be deserialized. this gets pretty wasteful if your query is returns megs of data and you have to serialize that to json and serialize it on the client, and it's especially wasteful if the list is supposed to update frequently.
|
# ? Mar 14, 2019 14:25 |
|
ddiddles posted:Ah yeah, I initially went with the short class names just because I was sticking them in the template, but with setup you could make your class names more semantic. I don't think there's anything wrong with short names, you still have to type them in the CSS so as long as the naming is consistent it seems to make sense. It just means that someone who's new to the project can't just quickly glance at a div's class attribute or inside your SASS file and understand exactly what each rule is doing. It only took me like 20 seconds to start to understand your naming conventions though. I guess the nice thing about using a pre-built utility-first CSS library is that they come with documentation, so if you do have new people joining your team you can just tell them "we use <x>, here's the docs"
|
# ? Mar 14, 2019 14:31 |
|
Bruegels Fuckbooks posted:the limit client side is pretty much how much memory you can use (unless you're talking about 'store' in a localstorage sense). sorting on the client side with javascript is actually pretty fast too, even complicated sorts with thousands of records will happen relatively fast. the biggest problem with having an api not paginate is that performance/scalability of the api will be much lower if you don't paginate - the db will have to return the entire resultset, api has to serialize it and send it over the wire, and then it has to be deserialized. this gets pretty wasteful if your query is returns megs of data and you have to serialize that to json and serialize it on the client, and it's especially wasteful if the list is supposed to update frequently. That's why I suggested it's important how complicated your sorting/pagination is, since you'll be effectively duplicating it both in the db and client side. So it has to be maintained in two places. As always there's not a one size fits all solution. It depends on the project what someone should do.
|
# ? Mar 14, 2019 17:01 |
|
Complete novice here, started playing around with html+css+javascript a week ago to prototype some ideas I had. Right now I'm trying to figure out what I should use to do database-like stuff. Nothing fancy, I just want to create a bunch of objects with the same keys but different values and then get all objects that match a certain key value, so I can display them. Whatever I use it want it to be a hosted library since like I said I'm just doing prototyping so I don't care about security and I want to be as lazy as possible in setting things up. I searched cdnjs for 'database', looked at every option, and feel a little overwhelmed, so I just want to know whatever it is you might recommend.
|
# ? Mar 14, 2019 21:28 |
|
Jon Joe posted:Complete novice here, started playing around with html+css+javascript a week ago to prototype some ideas I had. Right now I'm trying to figure out what I should use to do database-like stuff. Nothing fancy, I just want to create a bunch of objects with the same keys but different values and then get all objects that match a certain key value, so I can display them. You are in the wrong place at the wrong time, because I am here. If you want to be lazy and simple. Just store your data in excel sheets, then export that data to json, load the data (static files) with Javascript. Use a localside template engine like moustache for rendering. If the data changes, regenerate these static json files. This only would work if your access is read-only, if you have to change data, then no useful
|
# ? Mar 14, 2019 21:36 |
|
Holygod don't use excel, forgodssake at least use sqlite jesus.
|
# ? Mar 14, 2019 21:38 |
|
Nolgthorn posted:Holygod don't use excel, forgodssake at least use sqlite jesus. Can't agree hard enough. Tei posted:You are in the wrong place at the wrong time, because I am here. This is neither simple or lazy and is a dumpster fire waiting to happen.
|
# ? Mar 14, 2019 21:46 |
|
|
# ? May 16, 2024 11:40 |
|
Nolgthorn posted:Holygod don't use excel, forgodssake at least use sqlite jesus. Clarification: My suggestion is to use excel or any spreadsheet to generate JSON files. It dont matter if you uses a spreeadsheet software like VisiCalc, the notepad, edmacs or vi. Whatever is more convenient to generate the json files would work.
|
# ? Mar 14, 2019 21:46 |