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
fuf
Sep 12, 2004

haha
Does anyone know of a javascript library that will resize a bunch of elements so they fit into a container without any scrolling?

I think I need to be googling something like masonry/mosaic/grid/tile/wall, but I can't find anything that does exactly what I want.

All the ones I've found you have to specify a number of columns, but I want something that will just fit elements into the available space (with roughly the same number of rows and columns).

I'm using React.

fuf fucked around with this message at 14:24 on Sep 17, 2022

Adbot
ADBOT LOVES YOU

Doom Mathematic
Sep 2, 2008
It sounds like there's a strong chance you can meet your requirements using CSS Grid, no JavaScript required.

Jabor
Jul 16, 2010

#1 Loser at SpaceChem
If you specify the size of your elements as a percentage of the container and an aspect ratio instead of as a fixed size, then they'll scale with the size of the container.

Wheany
Mar 17, 2006

Spinyahahahahahahahahahahahaha!

Doctor Rope

Wheany posted:

Hmm, Ember seems like it's superficially well documented, like the store's find function:
http://emberjs.com/api/data/classes/DS.Store.html#method_find

The documentation says that the function returns a promise. Fine. That means I can call then() on it. What arguments does then() get called with in the different scenarios?

DS.RecordArray when you call find without an id, a single model when you call find with an id

Maybe this is interesting, maybe it isn't, but I'm currently in the process of upgrading the Ember app I was developing here in 2014, from version 2.10 to the newest LTS version, 4.4. I have been jumping from LTS version to LTS version and I still have 2 updates left, including the one from 3.28 to 4.4. Who knows, maybe they release 4.8 before I'm finished.

dupersaurus
Aug 1, 2012

Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

fuf posted:

Does anyone know of a javascript library that will resize a bunch of elements so they fit into a container without any scrolling?

I think I need to be googling something like masonry/mosaic/grid/tile/wall, but I can't find anything that does exactly what I want.

All the ones I've found you have to specify a number of columns, but I want something that will just fit elements into the available space (with roughly the same number of rows and columns).

I'm using React.

My guess would be it doesn't exist because I think (ianae) that's a flavor of bin packing problem which is computationally hard. Setting a fixed row and/or column count is how you bypass the need to solve P=NP to get something that's Good Enough.

Chas McGill
Oct 29, 2010

loves Fat Philippe
Try googling for linear partition image gallery.

Hed
Mar 31, 2004

Fun Shoe
Is there a datatable library that supports color coding by histogram/value? I've got a simple crud app that displays tabular data. It's Django now; I'm not allergic to front-end but given developer time have kept it super simple with no front-end.

Now I'm wanting to do color-coding of tables like Excel's color scales (see pic). I've been looking at ag-grid and DataTables (which I've used before) but they don't seem to have built-in options. Does anyone have any recommendations? Not trying to fully recreate Excel, but filtering and stuff would be nice if it's all together. Given the above, would prefer pure JS or, if needed, React.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

Hed posted:

Is there a datatable library that supports color coding by histogram/value? I've got a simple crud app that displays tabular data. It's Django now; I'm not allergic to front-end but given developer time have kept it super simple with no front-end.

Now I'm wanting to do color-coding of tables like Excel's color scales (see pic). I've been looking at ag-grid and DataTables (which I've used before) but they don't seem to have built-in options. Does anyone have any recommendations? Not trying to fully recreate Excel, but filtering and stuff would be nice if it's all together. Given the above, would prefer pure JS or, if needed, React.



d3 has color schemes and interpolation functionality. If you have a need for any functionality related to dataviz, d3 probably has it. https://github.com/d3/d3/blob/main/API.md#color-schemes-d3-scale-chromatic

zokie
Feb 13, 2006

Out of many, Sweden
There is https://medialab.github.io/iwanthue/ and also https://gka.github.io/chroma.js/ which supports scales like this https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

HaB
Jan 5, 2001

What are the odds?
What's the new hotness in backends, these days?

I have been doing a lot in Node/Hapi, but wanna pick up something new.

Pretty much straight up CRUD is all I'm doing.

abraham linksys
Sep 6, 2010

:darksouls:
I'm actually curious if anyone can think of a specific "new hotness." No one ever stepped up to replace Rails for a variety of reasons, and a lot of the "innovation" in the space seems to just be cloud companies reinventing various wheels but with more vendor lock-in.

I feel like people want type safety on the backend now - I do, at least - but backend TypeScript is really awkward. Various attempts at mapping TypeScript to ORMs/databases/RPC systems seem to have not gone very well, usually running into the ultimate problem of "TypeScript types have no runtime representation and this makes I/O validation hard" (whether it's guaranteeing your SQL query returned the right shape or guaranteeing you're receiving a valid JSON blob on a POST endpoint). I have not seen very much movement in backend TS over the past few years.

So if you discard TS, you've got a lot of languages that are popular, but not "hot," and maybe not very easy to spin up some CRUD stuff in. Go, for example, is infamously verbose and easiest to write in maintain when you are, yknow, a company with a whole bunch of recent CS grads to throw at a problem. Why have generics when you can have three junior engineers fresh out of MIT just rewrite the same data structures for every new feature? There have been many attempts to apply Rust to web development, but that has so much overhead that it doesn't seem worth it at all unless you're doing something high performance (like a video game backend).

I feel like Java is becoming increasingly popular at "hip" startups that would have sneered at it (it's pretty common as companies migrate to microservices), and we use it (actually Kotlin, though that's very rare on the backend) to good effect at my company. That said, we haven't really identified a common architecture for our services we're happy with - we use Dropwizard but that's very long in the tooth, and we're interested in Ktor but that's very new and not particularly robust yet. Spring Boot is a relatively new thing that takes the infamously big ol' enterprise hell of Spring and tries to turn it into something much friendlier and lighter weight (at least conceptually, I'm sure it still has a hell of a runtime footprint compared to a Go app or something); that might be an interesting place to start if you're interested in a JVM backend.

There's also the wildcard that Python, of all languages, has become increasingly friendly towards static typing, and there's a few frameworks that are trying to build around that. I think this still runs into the same problem as TS though, where a lot of the I/O boundaries are not type sound (like, apparently there is supposed to be some future SQLAlchemy release that has some kind of static type support, but that seems a far ways away).

Spime Wrangler
Feb 23, 2003

Because we can.

As a solo developer I've had good experiences with django on the backend (full send using the ORM and and django-rest-framework). Projects mostly in the 20-50k LOC range with low user numbers and minimal performance requirements.

On my most recent greenfield project I'm trialling using the cookiecutter-django docker deployment, which is awesome so far for providing a fully-featured backend environment with all the bells and whistles I've had to kludge together from medium posts in the past. Feels like lots of moving parts on top of a base install, though.

I'm also trialling using OpenAPI-generator to construct all the typescript models and type definitions for a vuejs3 frontend. With the cookiecutter scaffold everything is set up out of the box with openapi to generate your schema file for the generator.

No idea if this is all going to be a good idea in the end, but it's certainly looking like it's going to eliminate entire categories of type issues and create a real nice single-source-of-truth for frontend and backend datastructures at the django ORM + DRF serializer layer. Once I define the models in django my hope is to not have to manually specify any type information anywhere between the actual DB and typescript land, unless there's a custom DRF serializer field. Ideally this makes the IO boundaries as type sound as possible, since both sides are autogenerated from the same definitions. Hopefully it doesn't leak like a sieve, but the comment about TS-ORM mappings going poorly are a little worrisome!

If there's a better way of doing all this then by god I'm all ears, especially if I can integrate it with the platforms I'm already committed to.

lunar detritus
May 6, 2009


I still really like Rails. :shrug:

prom candy
Dec 16, 2005

Only I may dance

abraham linksys posted:

I feel like people want type safety on the backend now - I do, at least - but backend TypeScript is really awkward. Various attempts at mapping TypeScript to ORMs/databases/RPC systems seem to have not gone very well, usually running into the ultimate problem of "TypeScript types have no runtime representation and this makes I/O validation hard" (whether it's guaranteeing your SQL query returned the right shape or guaranteeing you're receiving a valid JSON blob on a POST endpoint). I have not seen very much movement in backend TS over the past few years.

https://trpc.io/ seems to be gaining quite a bit of traction. Prisma theoretically provides type safety at the ORM layer. Zod is also filling in the gaps quite a bit for runtime type safety. You can define your types as Zod schemas rather than Typescript types/interfaces and get early errors at runtime if something fails to satisfy them. Great for stuff that comes from untrusted sources like an untyped API or form input. If I was starting a new API project today I would almost certainly be doing it with Typescript.


lunar detritus posted:

I still really like Rails. :shrug:

I'm so sick of Rails. I'm grateful for the scads and scads of cash it made me over the years but I would be happy to never use it again.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
i'm still having fun with flask and sqlalchemy.

that being said, both my current and last companies were starting greenfield backends in go, so i think that's probably the new hotness, job-wise

lazerwolf
Dec 22, 2009

Orange and Black
FasrAPI seems like the new hotness for CRUD based backends. There’s a bit of a setup to get all of the features that something like django has out of the box however.

prom candy
Dec 16, 2005

Only I may dance
It's funny how fractured (or maybe just how big) the industry is that you can ask "what's the new hotness" and get ten different answers.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
i somehow have avoided rails for 6 years at 5 different companies i can never wrap my head around how popular it is

minato
Jun 7, 2004

cutty cain't hang, say 7-up.
Taco Defender

teen phone cutie posted:

i somehow have avoided rails for 6 years at 5 different companies i can never wrap my head around how popular it is

:yossame:
It's like Windows admins. I know they exist, I know there are thousands, they're just ... invisible.

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
It’s elixir + phoenix. Erlang concurrency model and supervision trees are the future we all need

prom candy
Dec 16, 2005

Only I may dance

Chenghiz posted:

It’s elixir + phoenix. Erlang concurrency model and supervision trees are the future we all need

Dynamically typed though isn't it? The future is typesafe.

HaB
Jan 5, 2001

What are the odds?

prom candy posted:

It's funny how fractured (or maybe just how big) the industry is that you can ask "what's the new hotness" and get ten different answers.

Ha right?

Was not expecting all the answers.

teen phone cutie posted:

i somehow have avoided rails for 6 years at 5 different companies i can never wrap my head around how popular it is

I have worked on Rails at my last shop, and also some vanilla Ruby. I have never understood why, for a time at least in the early 2000s, Rails devs were making SO MUCH MORE than the rest of us. Like at one of my first programming jobs, I was getting like $40/hr on a contract, and I had a similarly-experienced friend who worked on Rails and was making like $65.

I see the value in Rails, but it also strikes me as being sort of similar to Angular 2- not codewise or structure-wise, but that it is VERY opinionated, and woe unto thee lest you attempt anything outside the "Rails way".

I think I may give Go a shot. Have a coupla devs I have worked with in the past who moved to Go and they seem to love it. This is for a solo project anyway, so...

barkbell
Apr 14, 2006

woof
i really like fastify

kedo
Nov 27, 2007

"The new hotness" is not worth pursuing, ye be warned.

prom candy
Dec 16, 2005

Only I may dance

kedo posted:

"The new hotness" is not worth pursuing, ye be warned.

Yes it is doing the same poo poo all the time is boring. Or do you mean from a business point of view? Because in that case yeah but that's not my problem

Jabor
Jul 16, 2010

#1 Loser at SpaceChem
There's a level of satisfaction in mastering your tools that you just don't get from doing the first year of learning a new tool over and over and over again.

FormatAmerica
Jun 3, 2005
Grimey Drawer
Does Svelte count as "new hotness"?

I am finding I don't hate it which is more than I can say for React, Angular and Vue.

MrMoo
Sep 14, 2000

I was impressed how somewhat toxic(?) with super NIH syndrome that Nuxt JS is. Like it replaces all NPM commands, TSC configuration, and also wraps all code with its own context.

When starting an app it has a giant advert for itself and somewhat wanting logging. I was surprised it took 2 mins to start in a VM on a MacBook Air, but no one else reports a problem in my team.

Comes across as a CoffeeScript 2 more than anything. I’m not a fan.

prom candy
Dec 16, 2005

Only I may dance

Jabor posted:

There's a level of satisfaction in mastering your tools that you just don't get from doing the first year of learning a new tool over and over and over again.

True but if you're using the same toolchain for 5+ years you might be missing out on some cool new stuff. When I was in my early 20s my wife's company had this marketing/tech agency and the old guy running their web stuff insisted on doing everything in ColdFusion. It took them forever to do anything and the work was not good and I swore I was never gonna be that old guy who was just set on doing things the first way he learned how.

Similarly, I had to work with an iOS contractor a couple years ago who seemingly stopped learning language/framework features like 3-4 major versions ago. Didn't use StackViews, didn't use functional array methods like .map. Didn't use newer/better libs for data fetching, and so on. It's not quite the same as "the new hotness" but I'm sure in his own estimation he had mastered his tools.

You also see it on forums and twitter all the time. Popular library introduces a new feature or paradigm shift in a major version release and a bunch of whiners freak the gently caress out about "what was wrong with the old way?!" People are still complaining about React hooks. There's probably someone out there still mad about the new ActiveRecord syntax from Rails 3.

Anyway all that to say it's good to always be learning new stuff. Sometimes I try the new hotness and it just makes me appreciate my current toolchain all the more. Other times I try it and I really like it and then over time the new hotness turns into the boring standard, like Rails and React did.

kedo
Nov 27, 2007

prom candy posted:

Yes it is doing the same poo poo all the time is boring. Or do you mean from a business point of view? Because in that case yeah but that's not my problem

Eh... in my job I'm working on new, different projects all the time. The project/functional requirements vary wildly from project to project, and that's enough to keep me from getting bored.

But I also have to go back and make edits on sites that are anywhere from 0 to 5+ years old, and if I were to pick up every new, hot framework/build tool/package manager/deployment process as soon as they were released it would be a massive pain in the rear end to keep track of how each site is built and what nuanced, dumbass command line rituals must be performed to appease the beast before I can make simple changes.

HaB
Jan 5, 2001

What are the odds?
Side question:

what's a good, preferably FREE tool for loading testing and things?

Like I have an API and I just wanna fire a shitload of requests at it to see what happens.

barkbell
Apr 14, 2006

woof
Gatling. Autocannon. Artillery.

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.

kedo posted:

Eh... in my job I'm working on new, different projects all the time. The project/functional requirements vary wildly from project to project, and that's enough to keep me from getting bored.

But I also have to go back and make edits on sites that are anywhere from 0 to 5+ years old, and if I were to pick up every new, hot framework/build tool/package manager/deployment process as soon as they were released it would be a massive pain in the rear end to keep track of how each site is built and what nuanced, dumbass command line rituals must be performed to appease the beast before I can make simple changes.

Oh we just have every arbitrary project have a new set of arcane dependencies and command lines to run and no documentation. If you can't figure out how to hop projects, you become a project manager.

worms butthole guy
Jan 29, 2021

by Fluffdaddy
Hey all, I have a question about React, Context & Dispatching.

Goal: Trying to push a object of items into a array

I currently have a context and reducer set up as follows:

code:

const initialState = {

shopping_cart:[]
}



const Reducer = (state, action) => {

switch (action.type){

case "ADD_TO_CART":
console.log("adding to cart");
return {...state, shopping_cart: [
      ...state.shopping_cart,
      {
         [action.payload.prop]: action.payload.value
      }
]}
}
}
and if I want to add something I can do the following:

code:
const addToCart = (prod) => {
    dispatch({
          type: "ADD_TO_CART",
          payload: {
                      prop: "product_name",
                      value: "Instagram"
              }
})
}
which produces:

code:
{
  shopping_cart: [
    0: {
      product_name: "Instagram Post"
}
]
}
this works but only if I want to add one item to that array. I'm trying in actuality to add a object of items and I can't figure out the logic that I need to put in the reducer to get that to work. So, ideally i'd like to have a functin on another component that does something like:

code:
const addToCart = (prod) =>{

    dispatch({
         type: "ADD_TO_CART",
         payload: {
                  "product_name": "Test Product"<
                   "price": 2500,
                   "quantity": 2
          }

});
}
i'm not sure how to change the Reducer to let me do that. I've always been pretty shite with objects and arays so appreciate any help!

I hope this makes sense. Appreciate any help.

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


Just remove the `.value` in your reducer and shove the entire payload object into the state.

If I understood the ask correctly.

worms butthole guy
Jan 29, 2021

by Fluffdaddy
Well I feel dumb now lmao. Thanks that did it.

code:
 const addToBuilder = (prod) => {
            dispatch({
                type: "ADD_TO_CART",
                payload: {
                    product_name: "Instagram",
                    price: 2500,
                    quantity: 1
                }
            })
new reducer:
code:
case "ADD_TO_CART":
            console.log("Adding product to builder: " + action.payload);
            return {...state, deal_builder:[
                    ...state.deal_builder,
                    action.payload
                ]}

worms butthole guy
Jan 29, 2021

by Fluffdaddy
hi goons I got another question that is boggling my mind lol

I have a reducer that I use to add items to a array:

code:
case "ADD_TO_BUILDER":
            console.log("Adding product to builder: " + action.payload);
            return {...state, deal_builder:[
                    ...state.deal_builder,
                    action.payload
                ]}
which produces something like:

code:
deal_builder
: 
Array(2)
[
{product_name: 'Winter Mountain Pass 22/23', price: 3465, quantity: 3}
{product_name: 'Winter Mountain Pass 22/23', price: 5775, quantity: 5}
]
i'm trying to write a state changer that removes a object from that array. I kinda have the logic together i'm just too dumb to figure out how to correctly word my context to actually properly remove it. I have a button in React that sends the desired index to delete (so for example 1) and this is where I tried:

code:
 case "REMOVE_FROM_BUILDER":
            return {...state, deal_builder: state.deal_builder.splice(parseInt(action.payload, 1))};
but this isn't working :(. I'm guessing i'm missing something for the deal_builder: state.deal_builder.splice(parseInt(action.payload, 1)) portion but I can't figure it out. Hoping a kind goon can help out. Thanks :D

dupersaurus
Aug 1, 2012

Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

worms butthole guy posted:

hi goons I got another question that is boggling my mind lol

I have a reducer that I use to add items to a array:

code:
case "ADD_TO_BUILDER":
            console.log("Adding product to builder: " + action.payload);
            return {...state, deal_builder:[
                    ...state.deal_builder,
                    action.payload
                ]}
which produces something like:

code:
deal_builder
: 
Array(2)
[
{product_name: 'Winter Mountain Pass 22/23', price: 3465, quantity: 3}
{product_name: 'Winter Mountain Pass 22/23', price: 5775, quantity: 5}
]
i'm trying to write a state changer that removes a object from that array. I kinda have the logic together i'm just too dumb to figure out how to correctly word my context to actually properly remove it. I have a button in React that sends the desired index to delete (so for example 1) and this is where I tried:

code:
 case "REMOVE_FROM_BUILDER":
            return {...state, deal_builder: state.deal_builder.splice(parseInt(action.payload, 1))};
but this isn't working :(. I'm guessing i'm missing something for the deal_builder: state.deal_builder.splice(parseInt(action.payload, 1)) portion but I can't figure it out. Hoping a kind goon can help out. Thanks :D

The return value of splice isn't the updated array, the array is modified in place. So you need to assign it to a temporary variable, call splice on that, and then return that

worms butthole guy
Jan 29, 2021

by Fluffdaddy

dupersaurus posted:

The return value of splice isn't the updated array, the array is modified in place. So you need to assign it to a temporary variable, call splice on that, and then return that

doh that makes sense. thank you

Adbot
ADBOT LOVES YOU

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL
Don't use splice (because it mutates), use filter or slice.

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