Squeemeister
Squeemeister
PostsComments
KPCKevin Powell - Community
Created by Stupid on 6/30/2024 in #front-end
How do I make gradient smoother?
Adding more colors between the origin and end colors should smooth it out. There are tools like this that can generate the gradient for you; this link is your 2-color gradient result: https://mycolor.space/gradient?ori=to+right&hex=%23CC0202&hex2=%2301052B&sub=1
6 replies
KPCKevin Powell - Community
Created by Daryl M on 6/28/2024 in #front-end
Stop focus to the embedded form
I know this might seem like a "duhh" question but... Does Formstack give you the ability to disable autofocus on the first field? I've never used them so I've no clue, but that feels like a setting you should be able to access when managing or creating a form.
9 replies
KPCKevin Powell - Community
Created by ZomaTheMasterOfDisaster on 6/6/2024 in #ui-ux
Deciding on a color palette and also what mobile phone screen size to start with
I was about to recommend Adobe Kuler, but just found out it's now simply called color.adobe.com (marketing isn't their strong suit). I assume it's still free, despite Adobe desperately wanting to sell you some subscription-based-software.
9 replies
KPCKevin Powell - Community
Created by Rhandom Guhy on 6/13/2024 in #front-end
Which Html element should be used?
If you'e just displaying/sorting data then yeah, tables for sure. If it requires some interactivity like rearranging the row orders by dragging or something, then divs or div/table combo might work best.
3 replies
KPCKevin Powell - Community
Created by Mooshio on 6/13/2024 in #front-end
Moving Elements in a Sticky Header
I think your plan of showing/hiding them depending on header collapse might be your best bet, but someone else might have a cool unique take on it.
9 replies
KPCKevin Powell - Community
Created by Mooshio on 6/13/2024 in #front-end
Moving Elements in a Sticky Header
Side-note: Is there a specific reason Components A & B aren't already in the header? Are they page-specific instead of site-wide? If so, adding them to the header might not be a good idea unless the same behavior is duplicated throughout the site. Once a user has seen a site's header, they're not expecting it to change and may not look there when they 'need' to. The animation might help draw their attention to it, but if it doesn't hurt the design/layout to have it directly below the header I'd consider keeping it there so it's more obvious that it's a page-specific feature for the user.
9 replies
KPCKevin Powell - Community
Created by Mooshio on 6/13/2024 in #front-end
Moving Elements in a Sticky Header
What if the header (row-1) is fixed and scrolling the page moves row-2 up and over row-1? When row-2 content is 'in place', it becomes fixed and looks like it moved into row-1 but really is just sitting on top of it. (I'm imagining row-2 has no background and its content would already be aligned to avoid the menu/logo.) Otherwise, I think your alternative solution would be fine.
9 replies
KPCKevin Powell - Community
Created by griff on 5/16/2024 in #front-end
what are your opinions on custom cursors?
You know what, it's my fault. I used a poor analogy... not everyone knows how to drive or does it on a daily basis. So here's a better one: Imagine that every time you sit down to eat, the utensils you're used to are there, but each time you pick up one, it becomes something new and different. Whatever it became can still technically be used to either cut food or guide it to your mouth, but not in the way you're used to having done it thousands and thousands of times before in the exact same way. If you aren't expecting this and you're hungry, your user experience has now been diminished. Oh, and remember, just because this is 100% true doesn't mean you can't still do it. Just remember those caveats I mentioned.
8 replies
KPCKevin Powell - Community
Created by griff on 5/16/2024 in #front-end
what are your opinions on custom cursors?
It's reasonable to create a custom cursor if it fits in with the experience
See the caveats I took the time to think over and type.
and as you state - users are very accustomed to how a cursor works
No, what I said was users know what their cursor looks like. Getting accustomed to alternate and/or creative cursors takes time and that's time that most users won't waste unless they have no choice. Maybe you've never used custom pointers before, but there are a lot of options and the click registration isn't always where you'd expect it to be. Use a mirrored cursor or one with the click registration in the center and you'll see exactly what I mean.
This is a little short sighted. There are ways to know if a user is using accessibility tools
Is there a way to know if a user has installed a custom pointer in windows? If the answer is no (and it is) then, as I said, you can't know for sure and if you can't know for sure then what you're doing now is called guess-work and it's as accurate and useful as it sounds. Talk about short-sighted.
8 replies
KPCKevin Powell - Community
Created by griff on 5/16/2024 in #front-end
what are your opinions on custom cursors?
Any unexpected changes to UI elements like the mouse cursor will negatively affect usability. Imagine getting in your car and finding that someone has replaced your shifter with a mannequin arm. Because of that, something you used to do without thinking has now become a chore. Because the main method of interacting with your site/application is with a mouse cursor, changing that experience can only work against you. Users know what their cursor looks like and how it feels/operates. Unexpected changes to that will rarely be welcomed. You can never know if a user is already using a replacement cursor for any number of accessibility reasons. Removing that is like kicking a cane away from an elderly. A couple of caveats: If your website is devoted to selling custom cursors, having it immediately change wouldn't be as unexpected as it would on any other website. If you wanted to provide an option for replacing the cursor, that would give the user a level of choice you'd have been removing otherwise. If you do automatically replace the cursor, you should make a very visible and accessible option for disabling it at the very least.
8 replies
KPCKevin Powell - Community
Created by Rax on 4/30/2024 in #front-end
How to truncate text with ellipsis in the middle based on container width?
Have you considered setting a max-width on the li elements? You could then truncate them using something like: 
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
Also, just to clarify, are you only truncating based on the length of the <li> string or are you also truncating based on page-width or wrapper-width?
7 replies
KPCKevin Powell - Community
Created by Alistair on 4/23/2024 in #front-end
How to keep tooltips inside the page?
Believe it or not, there is more than one tooltip in the world and they even existed before browsers. A tooltip is ANY onscreen information that helps explain another onscreen element. (I can't believe I'm having to explain this. Don't you have access to the internet?) Tooltips are often built in to applications, like a browser, but they can also be created within an application, like a browser, with the use of markup and code. These can be static or dynamic, they can be fixed or attached to a cursor, they could contain a couple of words or entire paragraphs, and while the browser might be enabling them, it wouldn't have control over them. That is how you're wrong. What you've missed, of course, is that the real problem isn't your lack of understanding about tooltips, your real problem is taking the time to understand someone's question and then offering something helpful or nothing at all.
29 replies
KPCKevin Powell - Community
Created by Alistair on 4/23/2024 in #front-end
How to keep tooltips inside the page?
Yeah? You like that? Listen, champ... I don't like how less than a minute after the OP asked their question you, without even reading it thoroughly, replied "you can't." The OP clearly stated "you basically create the tooltip element next to the trigger element, and then you make it visible when the cursor passes over the trigger element" which is OF COURSE how you implement it yourself. So telling them that they need to implement it was about as helpful as telling them they can't. If you don't fully understand the question or don't have adequate knowledge to answer it, why in the world are you posting?
29 replies
KPCKevin Powell - Community
Created by Alistair on 4/23/2024 in #front-end
How to keep tooltips inside the page?
Of course you can do this. It's obvious from your question that you intend to implement these yourself, so I'm not sure why after less than a minute someone told you "you can't." All you need to get with javascript is three things: 1. The x,y position of the trigger element. 2. The width of the tooltip. 3. The width/height of the page. Let's say the width of the page is 1200px, the trigger element is near the right edge at 1150px and the width of the tooltip is 100px. So... because triggerX > (pageWidth - tipWidth) then the tip will need to be placed at (triggerX - tipWidth) and I'd suggest adding whatever you consider to be a comfortable margin, like 15 or 20px to tipWidth. You can use similar logic to determine the Y position to make sure tooltips will be visible for elements too close to the top or bottom of the page as well if that's an issue.
29 replies
KPCKevin Powell - Community
Created by dysbulic 🐙 on 4/4/2024 in #front-end
How to color text so it is visible against any background color?
Firstly, it's not my intention or place to come into "your house" and directly disagree with you but the prevailing attitude of "it can't be done" or "don't bother trying" I've seen lately is disheartening to say the least. Secondly, I apologize for the length of this post. So far we've got: My imperfect, 60 sec. solution with a 70% success rate (easily boosted to 80/85%) vs. People saying it can't be done (i.e. Nothing) Not every solution has to be 100% perfect; especially when the scope of the project is undefined. All I can do is reiterate that after about 60 seconds of thinking, I was able to outline a solution that by your own admission would have only a 30% failure rate, or to put it another way... 70% success. And the very first reaction to my solution was "that's not a good way, because of the fact that we're humans" In fact, my solution works precisely because we're humans. We decided to measure things that we observe using numbers that correlate to social mores. (0-100, for example, and of all the available options for background colors, hsl is really the only one that allows me to use that human measurement quite simply without having to pass a value to a third-party algorithm for analysis.) I think we should all try opening more doors instead of closing them.
35 replies
KPCKevin Powell - Community
Created by dysbulic 🐙 on 4/4/2024 in #front-end
How to color text so it is visible against any background color?
So, if the scope of the project doesn't have to meet accessibility guidelines or the dev. has any form of control over the colors used, this could be a feasible solution, if not perfect. The original poster didn't list any constraints, just a specific scenario. Also, the solution I proposed was simplified for example purposes. (i.e. Black and white being the only text color options and 70% lightness being the only cutoff.)
35 replies
KPCKevin Powell - Community
Created by dysbulic 🐙 on 4/4/2024 in #front-end
How to color text so it is visible against any background color?
Thanks for the explanation. Other than that particular yellow are there that many more "outlying" colors that make this solution so impractical? I mean, I considered yellow might be tough when I proposed the idea, but "checking for that particular yellow or red" is something easy enough to program, right?
35 replies
KPCKevin Powell - Community
Created by dysbulic 🐙 on 4/4/2024 in #front-end
How to color text so it is visible against any background color?
If you use hsl values for the background colors, you could (using javascript) get the lightness value and for anything below 70 assign a white font color, anything above 70 gets black.
35 replies
KPCKevin Powell - Community
Created by Joni on 3/29/2024 in #front-end
Missing Stuff on Website
If you always want it on-screen, like the navbar, just put it inside the navbar. Otherwise you'll have to account for the space the navbar is using.
9 replies
KPCKevin Powell - Community
Created by Joni on 3/29/2024 in #front-end
Missing Stuff on Website
Your navbar has a fixed position directly over the "top-banner". That's why it isn't showing. Change your navbar background to transparent to see what I mean.
9 replies