randomwebbits Comments - Answer Overflow

randomwebbits

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

This exercise has led to a change in source code. The boxList is now only allowing factors of the item count as the column counts. I'll play with the CSS, but I'm still uncertain how about to keep it responsive and not flashing.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

example: if 15 elements exist, 4 columns are not allowed because the nearest square (rounded down) is 9. if 16 elements exist, the nearest square is rounded down is 4, allowing 4 column width.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

That's awesome. MarkBoots had the right answer it appears. It seems a larger issue than currently understood. Mark: this is a weird issue. I prefer JavaScript to run the component math, just due to the configuration of the app currently --> It's a static hosted website that's precompiled typescript from my developer environment. The source is available thanks to Gulp and some dev environment configuration; the result is JS files that are added in the page head:

<!-- HEADER/FOOTER modules -->
  <script type="module" src="../typescript.js"></script>
<!-- page modules (including init for boxList) -->
  <script type="module" src="../pagesComponents.js"></script>

<!-- HEADER/FOOTER modules -->
  <script type="module" src="../typescript.js"></script>
<!-- page modules (including init for boxList) -->
  <script type="module" src="../pagesComponents.js"></script>

Jochem: Your answer appears matches and helps with extended explanation Kevin: You're correct. I want the component to be aware of the element count. Even though the page is hard coded with 6 elements, if I were to add any (which isn't currently planned), i prefer the component to dynamically adjust. ---> I've refreshed the code today so that playing in dev tools SHOULD work on resizing. If you duplicate one of the links to increase the count to 16, suddenly the component knows that it can have a column count of 4. With 6 current i only want to allow 1, 2, 3 or 6 columns. With this small example, it means excluding any 4 or 5 column widths. I feel it evens out the columns more, just for grins and programming practice.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

how do you suggest to do that?

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

please see above comment for yours, mark.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

your answer does not help to provide a solution to the question I asked

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

I needed to calculate the number of columns that I want. Potentially, this box list can hold many more links, so, programatcally it makes more sense to me.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

++++The call stack initializes boxList as boxList.init() within an event listener 'DOMContentLoaded' the component is rendered.

15 replies

KPCKevin Powell - Community

•Created by randomwebbits on 1/20/2024 in #front-end

Component page flash

++My site has a stack to analyze for this component. All the frontend source code is made available to developer's tools. The console's verbose messages for this particular component provides the source code location, called "boxList.ts" I'm uncertain whether the event DOMContentLoaded is at fault, or if there's a way to program a solution.

15 replies

KPCKevin Powell - Community

•Created by nick11 on 10/26/2023 in #back-end

How to compress images in s3 bucket ?

Before exploring cli methods, I would use https://squoosh.app/ to find what settings I like, then run a method for compression in bulk tailored to the settings found. ++ Props to squoosh for a great front-end!

18 replies

KPCKevin Powell - Community

•Created by randomwebbits on 10/14/2023 in #ui-ux

RandomWebBits need improvements. Component aware CSS

Right. The page is pretty basic. But it's meant to be simple. If you have any ideas or something you want to see added, feel free to share.

9 replies

KPCKevin Powell - Community

•Created by randomwebbits on 10/14/2023 in #ui-ux

RandomWebBits need improvements. Component aware CSS