bob_merlin
bob_merlin
DTDrizzle Team
Created by Sun「無用」 on 9/6/2024 in #help
How to start with drizzle?
And then you could go on with https://orm.drizzle.team/kit-docs/quick
3 replies
DTDrizzle Team
Created by Sun「無用」 on 9/6/2024 in #help
How to start with drizzle?
With drizzle you have to opt into some features. There are "Get started" sections in the docs for MySQL, Postgres and sqlite. For example https://orm.drizzle.team/docs/get-started-sqlite#better-sqlite3
3 replies
KPCKevin Powell - Community
Created by bob_merlin on 1/10/2024 in #front-end
How to handle overflow in Grid (grand-)children?
this looks promising. I'll have to try it out later, thanks for your help thus far. Is it ok to ping you here if i have any more questions regarding this issue?
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 1/10/2024 in #front-end
How to handle overflow in Grid (grand-)children?
we also tried https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp but its poorly supported and doesn't work as expected
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 1/10/2024 in #front-end
How to handle overflow in Grid (grand-)children?
ah ok, never seen this. Well that would be a good alternative. We would've preferred something like text-overflow: ellipsis; but thats no option since it restricts the text to 1 line
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 1/10/2024 in #front-end
How to handle overflow in Grid (grand-)children?
im not sure i understand what you mean 😄 Do you mean adding a gradient to the top of the <img> so that the text fades out behind the img?
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 1/10/2024 in #front-end
How to handle overflow in Grid (grand-)children?
I cant remove grid-template-rows from the base grid, since we want the rows to be same height and we increase the rows on smaller devices. aspect-ratio was the only way to ensure that the small tiles retain their aspect-ratio when resizing (customer wants it that way). And the <img> and text should also use 50% in their container. Like i said this is just an example build to show the issue. In our real codebase there are a couple of more grid-items, but the important thing for the small tiles was to ensure that they have a 4/3 aspect ratio and they should be split into 2 rows, each having 50% (text and img). In our app, the user can edit these tiles and insert text, but we decided that we just want to hide overflowing text if they enter too much for the tile.
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
@Rägnar O'ock yeah ive read a couple of stackoverflow issues about this topic and as far as i understood it, the order should be somewhat guaranteed since ES6. But seems like thats not enough for my use case. So i will change the structure
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
yeah i think i have to do that 😔 Thanks for your help 🙂
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
Oh sry, i didn't see that you edited your comment. Yeah maybe your suggested datastructure would be better. I didn't want to invest time refactoring the codebase so that the data structure works with the new sortable.js feature. But it seems like there is no other way around it 😄
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
Sadly it will get stored as JSON so i can only use Objects or Arrays. I would really prefer to store them as Record<number, number[]>. But maybe i have to go with something like:
const itemGroups = [
[1, [10, 11, 12]],
[2, [13, 14, 15]]
]
const itemGroups = [
[1, [10, 11, 12]],
[2, [13, 14, 15]]
]
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
Hm...i even tried it like this with the same result:
function moveItem(oldIndex, newIndex) {
const groupIds = Object.keys(itemGroups)
const [id] = groupIds.splice(oldIndex, 1)

groupIds.splice(newIndex, 0, id)

const ordered = groupIds.reduce((acc, id) => {
acc.set(id, itemGroups[id])

return acc
}, new Map())

return Object.fromEntries(ordered)
}
function moveItem(oldIndex, newIndex) {
const groupIds = Object.keys(itemGroups)
const [id] = groupIds.splice(oldIndex, 1)

groupIds.splice(newIndex, 0, id)

const ordered = groupIds.reduce((acc, id) => {
acc.set(id, itemGroups[id])

return acc
}, new Map())

return Object.fromEntries(ordered)
}
The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
The Map object holds key-value pairs and remembers the original insertion order of the keys. Any value (both objects and primitive values) may be used as either a key or a value.
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
the weird thing is, like i wrote in the code comments, that the groupIds are in correct order after the splicing. But as soon as .reduce() runs over the keys array, the resulting object still has the old order
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
exactly
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
Input is what i wrote in my code example: oldIndex & newIndex (which i get from sortable.js). So the object entry on oldIndex should be moved to newIndex (in the object). And the output of that function should be an object with the new order.
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 10/5/2023 in #front-end
Need explanation: Why .reduce() returns wrongly ordered object
First and foremost i wanted an explanation why my version doesn't work. I used .splice() instead of .sort() on the keys array because i think it would be easier to read compared to a sort callback that moves 1 item to a new index (i dont even know how to do that in a .sort() method with only using oldIndex & newIndex 😞 ) .
20 replies
KPCKevin Powell - Community
Created by bob_merlin on 12/7/2022 in #front-end
flex-grow - Maintain aspect ratio
plus: i have to use the aspect-ratio prop
13 replies
KPCKevin Powell - Community
Created by bob_merlin on 12/7/2022 in #front-end
flex-grow - Maintain aspect ratio
ok the issue was that i had a fixed width/height. This prevents them from growing on w/h in both flex and grid.
13 replies
KPCKevin Powell - Community
Created by bob_merlin on 12/7/2022 in #front-end
flex-grow - Maintain aspect ratio
thank you, i will look into it
13 replies
KPCKevin Powell - Community
Created by bob_merlin on 12/7/2022 in #front-end
flex-grow - Maintain aspect ratio
yeah i just have less experience with grid, which is why i tried it with flexbox 😄
13 replies