Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense

Tei posted:

yes?
the page in the iframe can call the parent and pass the with, so the parent adjust the width

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:
funtion onIframeLoad(iframe) {
    setTimeout(() => {
        iframe.style.height = 0;
        const documentElement = iframe.contentWindow.document.documentElement;
        iframe.style.height = documentElement.getBoundingClientRect().height + 20 + 'px';
    }, 0);
}

Adbot
ADBOT LOVES YOU

uncle blog
Nov 18, 2012

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)?

prom candy
Dec 16, 2005

Only I may dance
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.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

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?

prom candy
Dec 16, 2005

Only I may dance

Thermopyle posted:

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?

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:
<div className="flex items-center justify-between blue-light">{children}</div>
than

code:
<div 
  css={`
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: ${colors.lightBlue};
  `}
>
  {children}
</div>
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.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Thermopyle posted:

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?

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.

prom candy
Dec 16, 2005

Only I may dance
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.

minato
Jun 7, 2004

cutty cain't hang, say 7-up.
Taco Defender
https://twitter.com/thomasfuchs/status/1103700462107164672

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

:perfect:

Null of Undefined
Aug 4, 2010

I have used 41 of 300 characters allowed.

Reminder that nothing we achieve will ever come close to what she's achieved

Tei
Feb 19, 2011

Thanks to all the good programmers out here. Both men and women. But specially womens, since today is their day.

SimonChris
Apr 24, 2008

The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.
Grimey Drawer
https://twitter.com/TobiM/status/1103796011036753921

Dominoes
Sep 20, 2007

Thermopyle posted:

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?
I prefer a mix of inline styles and stylesheets, vice a lib or css framework. Generally speaking, CSS files for sensible defaults for tags. Eg all H1s are this size, bold etc. Inline styles for specific elements, or dynamic changes.

Roadie
Jun 30, 2013

Thermopyle posted:

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?

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.

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
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.

my bony fealty
Oct 1, 2008

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

ddiddles
Oct 21, 2008

Roses are red, violets are blue, I'm a schizophrenic and so am I

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:
<div class="p-t-xl p-lr-md m-b-xl p-t-xl-break-lg p-lr-md-break-lg m-b-xl-break-lg p-t-xl-break-sm p-lr-md-break-md m-b-xl-break-sm">
I ended up deciding on using css modules with scss since we're writing in that anyway, and its actually really nice, import your stylesheet as an object into your component and it auto transforms your classnames so they dont clash, so every one of your .scss files can have an un nested .container selector, and they get changed to something like "Component_selector_content_hash".

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:
// stylesheet.scss
@import '~styles/guide/padding';
@import '~styles/guide/margin';
@import '~styles/guide/breakpoints';

.container {
  @extend .p-t-xl, .p-lr-md, .m-b-xl;

  @media (max-width: $break-lg) {
    @extend .p-t-lg, .p-lr-md;
  }

  @media (max-width: $break-sm) {
    @extend .p-t-sm, .m-b-sm;
  }
}


// MyComponent
import styles from './stylesheet.scss';

<div className={styles.container}>
Currently in the stages of testing its implementation on a new feature, its a pretty nice setup so far.

ddiddles fucked around with this message at 04:14 on Mar 13, 2019

ConanThe3rd
Mar 27, 2009
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.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
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.

ConanThe3rd
Mar 27, 2009
So have the quiery make the API serve the data pre-sorted. OK Thanks.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
But that's the opposite of what I said.

Opulent Ceremony
Feb 22, 2012

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.

ConanThe3rd
Mar 27, 2009

Nolgthorn posted:

But that's the opposite of what I said.

Sorry, Misread that comment.

SimonChris
Apr 24, 2008

The Baron's daughter is missing, and you are the man to find her. No problem. With your inexhaustible arsenal of hard-boiled similes, there is nothing you can't handle.
Grimey Drawer

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.
The solution is to never page the data, and tell your dumbass customers to clean up their data when the browser starts running out of memory :colbert:

prom candy
Dec 16, 2005

Only I may dance

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.

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.

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.

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:
<div class="p-t-xl p-lr-md m-b-xl p-t-xl-break-lg p-lr-md-break-lg m-b-xl-break-lg p-t-xl-break-sm p-lr-md-break-md m-b-xl-break-sm">
I ended up deciding on using css modules with scss since we're writing in that anyway, and its actually really nice, import your stylesheet as an object into your component and it auto transforms your classnames so they dont clash, so every one of your .scss files can have an un nested .container selector, and they get changed to something like "Component_selector_content_hash".

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:
// stylesheet.scss
@import '~styles/guide/padding';
@import '~styles/guide/margin';
@import '~styles/guide/breakpoints';

.container {
  @extend .p-t-xl, .p-lr-md, .m-b-xl;

  @media (max-width: $break-lg) {
    @extend .p-t-lg, .p-lr-md;
  }

  @media (max-width: $break-sm) {
    @extend .p-t-sm, .m-b-sm;
  }
}


// MyComponent
import styles from './stylesheet.scss';

<div className={styles.container}>
Currently in the stages of testing its implementation on a new feature, its a pretty nice setup so far.

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.

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


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.

Roadie
Jun 30, 2013
Use GraphQL, that way your pagination stuff is part of the settings of the client-side queries.

prom candy
Dec 16, 2005

Only I may dance
Use GraphQL because it's sweet and looks good on a resume

Roadie
Jun 30, 2013

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.

ddiddles
Oct 21, 2008

Roses are red, violets are blue, I'm a schizophrenic and so am I

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.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense

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.

Tei
Feb 19, 2011

Sorting things is the job of a database engine.

Sorting things clientside can sometimes be the correct decision, but are exceptions.

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

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.

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.

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.

prom candy
Dec 16, 2005

Only I may dance

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"

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense

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.

Emmideer
Oct 20, 2011

Lovely night, no?
Grimey Drawer
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.

Tei
Feb 19, 2011

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.

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.

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

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
Holygod don't use excel, forgodssake at least use sqlite jesus.

The Fool
Oct 16, 2003


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.

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

This is neither simple or lazy and is a dumpster fire waiting to happen.

Adbot
ADBOT LOVES YOU

Tei
Feb 19, 2011

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.

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply