Alex Comments - Answer Overflow

Alex

•Created by McMarty on 4/27/2025 in #help

Making navigational page load quickly on mobile

Sorry to dive in on an ongoing thread and be super blunt, but your questions account for nearly a third of all the messages in this help forum for the last month and every time someone raises this point, you brush it off with a winky emoji

176 replies

KPCKevin Powell - Community

•Created by McMarty on 4/27/2025 in #help

Making navigational page load quickly on mobile

Focusing on this before you have any kind of MVP is seriously myopic, but also, the only way you get meaningful answers is by gathering masses of data from AB tests run on actual users, which you won't have until your product exists as more than a vision

176 replies

KPCKevin Powell - Community

•Created by McMarty on 4/27/2025 in #help

Making navigational page load quickly on mobile

But I am building a multi-million dollar business

This is the point so many people are trying to make: you aren't. You can't build a multi-million dollar business from a $0 business — you build it from a $1m business, and you build that from a $100k business, and so on. It is impossible for anyone to tell you, right now, the answer to all these questions, because you're doing the kind of minor twiddling with variables that can only offer meaningful gains to an app with an established user base and a functional revenue stream.

176 replies

KPCKevin Powell - Community

•Created by Zach on 4/27/2025 in #help

Can anyone recommend a good free form submission service that emails you from a website contact form

Tally.so works great for this

5 replies

KPCKevin Powell - Community

•Created by redcaus1235 on 4/3/2025 in #help

Feedback on Website Design & Visual Appeal

One thing I noticed: on desktop, the cursor changes to a pointer when hovering the testimonials, but there's no interactivity on the element. In general, I think the brown/gold colour scheme works okay, but there are places where you have a blue accent colour, like in the header of the testimonial section and the dates on the timeline, which doesn't really match. There's also some visual inconsistency in the card components, some of them have box shadows, others don't; I think it would benefit from one consistent approach.

34 replies

KPCKevin Powell - Community

•Created by chikanlegbees on 3/28/2025 in #front-end

Issue with scrolling on mobile even after height is viewport height ! Likely address bar issue

svh will account for the smallest screen size. dvh will adjust as the screen resizes, which can cause a very minor flicker depending on how it loads. It's hard to articulate the difference and the pros and cons of each approach depends very much on the exact application, there's no hard and fast rule of which one to use over the other (which is why dynamic units exist). If you're seriously concerned about the impact of a slight layout adjustment like this, by far the best solution is to test both variants on an actual device. As for browser support, small/large/dynamic viewport units have 93% support and have been baseline for 3 years. If you're concerned that's not sufficient, you can always set min-block-size: 100vh; min-height: 100svh; and browsers which don't support the newer units will fall back to 100vh.

3 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

I knew there was something like .toLocaleTimeString() out there but couldn't find it immediately. Never even heard of requestAnimationFrame() before, that's blowing my brain a bit. Thanks!

15 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

@13eck.c All good points. I was basing my code off @Myra's initial example, but you're right, it should be .innerText. What would be your approach to timing it, given the challenge and assuming that it's important for the clock to be second-perfect?

15 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

Yeah instead of calculating the time once and then adding a second every second, do it all inside your displayTime function and run that via setInterval, like this: https://codepen.io/Beanie127/pen/KwKxzya. This also lets you update the clock more regularly, so it can be more accurate to the second, if that's something that matters for your application (although if you care about accuracy to the millisecond, this probably isn't the ideal way to track time lol)

15 replies

KPCKevin Powell - Community

•Created by Cancerous Ordo on 3/25/2025 in #ui-ux

The eternal grid UI problem: auto-adjusting to screen width while also honoring saved user settings

Are you talking about behaviour of elements in a container with display:grid, or the <table> element? Because in either case, you can absolutely set one column to a specific width while leaving the others to resize accordingly. For grid layout, set the default column width to 1fr and then you can set specific grid columns to a fixed value. For tabular data, you can set table-layout: fixed on the table element and set widths on the <th> elements. Check out https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Tables and/or https://css-tricks.com/snippets/css/complete-guide-grid/ — both discuss the specific use case you're describing

2 replies

KPCKevin Powell - Community

•Created by CodeMoon07 on 2/9/2025 in #front-end

CSS Grid Layout Overflowing and Resizing

Your elements are changing size because without defined dimensions, they will fill the space available to them. The columns are defined in terms of fr units, where 1fr is a proportional fraction of the available space after accounting for anything which takes up a fixed amount of space... such as the content of the other children. To preserve the aspect ratio and proportions of the whole grid, you need to use a less 'permissive' unit. Grid and fr units are designed to resize in this way to prevent content overflows.

11 replies

KPCKevin Powell - Community

•Created by Oli_T on 2/8/2025 in #front-end

Overlapping containers Dilemma..

For overlapping elements if usually go with a grid solution, since that always feels cleaner if it needs to be overridden at different sizes.

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

#container { 
display: grid;
grid-template-rows: 1fr 15vw 1fr;
&  img {grid-row: 1 / 3}:
&  form {grid-row: 2 / 4};
}

I'd also avoid using vw units for vertical spacing, since on an ultra wide monitor the form will be far higher up, which I doubt is a desirable result.

8 replies

KPCKevin Powell - Community