|
A Cup of Ramen posted:For the most part I'm quite comfortable with HTML and CSS now, haven't really done much in JS though... don't suppose anyone would have any course recommendations that cover JS really well would they? Get Wes Bos´es Beginner JavaScript course. Its a 28 hour javascript course that will cover everything you need in a way that you understand it. Right now its on 50% sale also. e; https://beginnerjavascript.com/ the heat goes wrong fucked around with this message at 21:41 on Nov 29, 2020 |
#
?
Nov 29, 2020 21:14
|
|
|
|
| # ? Jun 6, 2024 22:19 |
|
|
Wes Bos is good
|
|
#
?
Nov 29, 2020 21:28
|
|
|
This is a kind of broad question, but I have a problem where I need to load a large amount of data into a table (50,000+ rows) and I'm not sure if the solution I have in mind makes sense. Currently the data is passed into the template as JSON and loaded into DataTables (which uses the Scroller plug-in), but this is obviously not really viable when there's a ton of data. My thinking is that I can store the JSON in a file and then create an endpoint (I'm using Python Flask) that takes the filename (or some ID associated with it) as a parameter and returns the JSON (that was stored in the file), and then DataTables loads the data from an AJAX call to that. Does this make sense? (The reason I'm not considering server-side processing for this table is that it isn't practical without largely redoing the way the page in question works.)
|
|
#
?
Dec 1, 2020 20:20
|
|
|
Ytlaya posted:This is a kind of broad question, but I have a problem where I need to load a large amount of data into a table (50,000+ rows) and I'm not sure if the solution I have in mind makes sense. Currently the data is passed into the template as JSON and loaded into DataTables (which uses the Scroller plug-in), but this is obviously not really viable when there's a ton of data. If you are creating 50k HTML table rows from data you're going to have a bad time. Your user will need to wait for the template to load, which will be huge. The user isn't going to be able to effectively see/use all the rows anyway so don't do that. If you are loading the blank page, then loading 50k JSON objects into memory and paginating through them in your table plugin that's better. But it still isn't great. You are forcing the user to download 50k JSON objects through the wire which will be costly. The user will be able to interact with the page early but will need to wait for the 50k objects to download. Can you separate your large amount of data into page-sized sets? For example, if you could separate the file into 100 objects per file, you could request any "chunk" of data (each as its own JSON file) and that would be quick to load. That would basically emulate server-side pagination.
|
|
#
?
Dec 2, 2020 06:01
|
|
|
Ruggan posted:If you are creating 50k HTML table rows from data you're going to have a bad time. Your user will need to wait for the template to load, which will be huge. The user isn't going to be able to effectively see/use all the rows anyway so don't do that. It won't be that many HTML rows; I'm using DataTables with the Scroller plug-in that loads rows on demand as you scroll. I think Scroller essentially accomplishes the same thing paging would as far as displaying the actual html goes. Pagination isn't preferred in this situation (my boss doesn't like it, lol). But (as you mentioned) I think it would still end up needing to download all the data, even if it's not directly loading it into the template (which is what it was doing before, with results truncated to allow for this). I think it largely depends upon how exactly DataTables deals with AJAX-sourced data with the deferred loading option enabled (I don't know if it will immediately load some of the rows or if it will have to download all of the data first). I've looked into something like streaming data with Flask, but I'm not sure how that would work with DataTables. Tomorrow I'll get it working with Scroller and sourcing the data from an AJAX call, so I'll at least know how that performs. It's not the end of the world if it's a little slow (only a small fraction of results will be really large - the context in this case is displaying genome mapping results, so length corresponds to number of markers in the genotype file). Splitting the results up into chunks is possible, but I'm not sure how to feed that to a single DataTables table. It might actually be possible to use server-side processing somehow (without rewriting a bunch of stuff); a coworker seemed to think it wasn't easily doable, but it seems to me like it should be doable since it just needs to refer to an existing JSON file for the data.
|
|
#
?
Dec 2, 2020 08:51
|
|
|
Ruggan posted:If you are loading the blank page, then loading 50k JSON objects into memory and paginating through them in your table plugin that's better. But it still isn't great. You are forcing the user to download 50k JSON objects through the wire which will be costly. The user will be able to interact with the page early but will need to wait for the 50k objects to download. 50KB of json weight has much 50KB of jpg and people don't mind that but pagination is another thing that databases do better than any other software because pagination depend on sorting and sorting is anything but simple
|
|
#
?
Dec 2, 2020 13:14
|
|
|
I manually implemented a infinite scroll thing once What I did is calculate the height of the full table with 50000+ records [table with forced height-- showing a scroll if the tbody is "too big"] [empty TR with height the height total - the visible+bottom] [visible tr's with data] [empty tr with height the height total - heightvisible - top] [/table] scrolling would request the current page and receive such page and that one before and after - results where cached at page level it worked but it was not too smooth since the table only had like 2 empty TR's and 50 records --- it was not too heavy on the browser I guess that doing this + having the data already on the clientside would result on a much more smooth experience but still not perfect --- I did this manually but I guess theres infinite scroll libraries that can be convinced to get the data from local and not remote source -- the conclusion here is that a html with too many elements will make the user experience miserable but having large invisible objects (such has a huge empty TR) don't seems to affect the browser in any way is the number of elements and no their "surface" that can be a problem for the browser Tei fucked around with this message at 13:48 on Dec 2, 2020 |
|
#
?
Dec 2, 2020 13:21
|
|
|
did the css for SA change or am i just crazy
|
|
#
?
Dec 2, 2020 23:28
|
|
|
Both things can be true I guess there’s a qcs thread about it but I didn’t look
|
|
#
?
Dec 2, 2020 23:33
|
|
|
https://forums.somethingawful.com/showthread.php?threadid=3950003#post510407763 just lmfao e: it's got good contrast tho 
|
|
#
?
Dec 3, 2020 00:16
|
|
|
Grump posted:e: it's got good contrast tho was literally about to do that. for some reason it feels like it doesnt
|
|
#
?
Dec 3, 2020 01:05
|
|
|
You aren't using your own CSS for the forums?
|
|
#
?
Dec 3, 2020 16:36
|
|
|
I've looked at the forums CSS and immediately regretted it so I'm not feeling especially keen on janitoring my own bespoke version.
|
|
#
?
Dec 3, 2020 17:16
|
|
|
nexus6 posted:You aren't using your own CSS for the forums? i am now! and you can bet that it's ugly as gently caress 
|
|
#
?
Dec 3, 2020 17:31
|
|
|
maybe not related - but heres the custom css I use to make JIRA dark code:Tei fucked around with this message at 17:46 on Dec 3, 2020 |
|
#
?
Dec 3, 2020 17:42
|
|
|
Inacio posted:i am now! and you can bet that it's ugly as gently caress 
|
|
#
?
Dec 3, 2020 18:14
|
|
|
Anybody got experience using Cypress with a React SPA? I'm trying to set up e2e tests to check the different pages of the app. I heard it was possible to manually set the state when testing, removing the need for the test to navigate through a series of pages in the UI to get to the page I want to test (it's not possible to go to this page directly, as the router checks if a certain state has been set in the containing component). I installed the plugin cypress-react-selector which seemed to fit the bill. The trouble is that I'm having trouble accessing my components. Opening up the app and checking in devtools, I clearly see the component names matching what is written in code. I follow the example on https://github.com/abhinaba-ghosh/cypress-react-selector, and try to locate one of my components: code:code:code:Any tips to what I might be doing wrong in trying to get access to my components?
|
|
#
?
Dec 4, 2020 14:38
|
|
|
I have a tiny bit of experience with this and the experience I had was that it's easier to write little helpers that simulate doing all the right clicks and filling in the right fields rather than trying to edit your state directly.
|
|
#
?
Dec 4, 2020 14:58
|
|
|
I feel like testing any SPA with anything short of a headless browser ends up being mindnumbingly annoying edit: I mean as in the "simulate typing/clicks" part, instead of trying to patch values Impotence fucked around with this message at 20:15 on Dec 4, 2020 |
|
#
?
Dec 4, 2020 16:45
|
|
|
Cypress is a headless browser
|
|
#
?
Dec 4, 2020 20:01
|
|
|
My experience with Cypress in a React SPA is that Cypress is intended to interact with a web browser in the same way that a human being does. Manually messing around with the state of the application in a way which is impossible for a regular person is counter to that; you end up with unrealistic tests. It might be that this test should be shifted left and become a component or unit test? Or it might be that the navigation process to reach this page the "normal" way should be part of the test too? Having said that... are you sure your React components have the correct names? I vaguely recall that a functional component like const MyComponent = ({ blah }) => <div>{blah}</div> does not actually have a name unless you also set MyComponent.displayName = 'MyComponent'.
|
|
#
?
Dec 4, 2020 23:02
|
|
|
uncle blog posted:
|
|
#
?
Dec 4, 2020 23:04
|
|
|
I've been taking a look at my current workflow so the recent JS talk has been good. What's the thinking on Bootstrap? Is there a better alternative? I used to build everything by hand on every project but then started using Bootstrap to simplify things since I was redoing a lot on every project.
|
|
#
?
Dec 5, 2020 03:03
|
|
|
Violator posted:I've been taking a look at my current workflow so the recent JS talk has been good. Yeah there are tons of good css frameworks these days, just depends on what things you’re looking for.
|
|
#
?
Dec 5, 2020 06:04
|
|
|
Violator posted:I've been taking a look at my current workflow so the recent JS talk has been good. I use semantic/fomantic ui and it works quite well
|
|
#
?
Dec 5, 2020 06:13
|
|
|
Chenghiz posted:Yeah there are tons of good css frameworks these days, just depends on what things you’re looking for. Main thing is simple structure to get responsive breakpoints easily. I like the rows/columns and breakpoints of bootstrap. I also like how they have some pre-built elements that you can use to jazz simple things like forms up a little. I'm building a top Laravel if that matters, not sure if that community has particular favorite frontend frameworks. The Fool posted:I use semantic/fomantic ui and it works quite well Nice, I'll check it out.
|
|
#
?
Dec 5, 2020 15:08
|
|
|
I've been slowly putting together my own kind of framework over the years, and it turns out it has a lot of similarities to Bulma. I really like Bulma, it's the cleanest CSS-only framework I've found.
|
|
#
?
Dec 5, 2020 16:46
|
|
|
I haven't spent much time with the CSS frameworks because I pretty much always work with a designer but Bulma always seemed like the nicest one to me.
|
|
#
?
Dec 5, 2020 19:01
|
|
|
Well it turns out Laravel has switched from bootstrap to Tailwind CSS as the frontend framework in 8.0. Guess I need to dig into that and see what's up.
|
|
#
?
Dec 6, 2020 04:12
|
|
|
Tailwind rocks but that's a weird switch. Bootstrap and tailwind are pretty different.
|
|
#
?
Dec 6, 2020 06:08
|
|
|
Yeah - protip: tailwind has a build script thing that you need to run each time you use a new class or it won't know what you're talking about. It's not like Bootstrap where you can just use a classname and expect the relevant CSS to be applied.
|
|
#
?
Dec 6, 2020 13:15
|
|
|
nexus6 posted:Yeah - protip: tailwind has a build script thing that you need to run each time you use a new class or it won't know what you're talking about. It's not like Bootstrap where you can just use a classname and expect the relevant CSS to be applied. That's only if you have purgeCSS enabled in development which... you shouldn't.
|
|
#
?
Dec 6, 2020 14:16
|
|
|
lunar detritus posted:That's only if you have purgeCSS enabled in development which... you shouldn't. Or if you inherit a project built with Tailwind that is already live 
|
|
#
?
Dec 6, 2020 14:48
|
|
|
nexus6 posted:Or if you inherit a project built with Tailwind that is already live If you can, try changing this setting in tailwind.config.js https://tailwindcss.com/docs/optimizing-for-production#enabling-manually code:
|
|
#
?
Dec 6, 2020 14:52
|
|
|
Thanks, just pointing out it's a gotcha if you're not already familiar with Tailwind
|
|
#
?
Dec 6, 2020 15:10
|
|
|
The other thing to be aware of with PurgeCSS is it can't detect classes in your code if you build them dynamically. code:You can choose not to use PurgeCSS but tailwind generates a lot of CSS so it's worth it.
|
|
#
?
Dec 6, 2020 15:27
|
|
|
lol, just had a couple of online forms that gave you a little box to draw a signature in. How are you supposed to do that with a mouse?
|
|
#
?
Dec 7, 2020 18:17
|
|
|
Is input type=color not working as expected for anyone else using macos safari 14? Selecting a color doesnt update the value and I cant find anything about it being a bug? I also tried disabling all extensions.
|
|
#
?
Dec 7, 2020 18:52
|
|
|
nexus6 posted:lol, just had a couple of online forms that gave you a little box to draw a signature in. How are you supposed to do that with a mouse? if your signature is as lovely as mine you can try it with a mouse just as well as you can write it with a pen
|
|
#
?
Dec 7, 2020 19:11
|
|
|
|
| # ? Jun 6, 2024 22:19 |
|
|
Tei posted:maybe not related - but heres the custom css I use to make JIRA dark Nice, wish Jira had this built in already. Adding hue-rotate(180deg) to the filter will keep the original color hue also.
|
|
#
?
Dec 7, 2020 20:54
|
|