WebMechanic
WebMechanic
PostsComments
KPCKevin Powell - Community
Created by Kiers on 7/19/2023 in #front-end
CSS Nesting Conventions
I love @custom-media --tiny-bit and @custom-selector :--headings Still requires PostCSS preset-env. Very useful, but IDE support is bad and they all get squiggly lines 😦
11 replies
KPCKevin Powell - Community
Created by Brunkz34 on 6/24/2023 in #front-end
Strange pixels showing up D:
Maybe is some default setting of the page which generates the image on my HTML
most likel because neither div nor img have paddings or extra white space by default. check with the style inspector in your browser devtools where that extra 7px are comming from.
14 replies
KPCKevin Powell - Community
Created by nehatkhan on 6/16/2023 in #ui-ux
how to make 3 grid not to take height of other column
It's for an assignment, I don't want to put more effort that's why I used Tailwind.
sure, why learn something by doing assignments, if you can cheat but don't understand what you're doing and have to resort to other people's help? 😁 😉 You still need to understand CSS in order to use a framework like Tailwind effectively or you'll always hit walls and waste your time trying to "solve" trivial things like aligning boxes in a grid. Good luck mate.
26 replies
KPCKevin Powell - Community
Created by nehatkhan on 6/16/2023 in #ui-ux
how to make 3 grid not to take height of other column
by default grid items "stretch", so find Tailwind's equivalent of align-items:start either for the grid wrapper or align-self:start for the nested items themselves. That should take care of the boxes. For their content I'd also use flexbox with columns, as @vince suggested.
26 replies
KPCKevin Powell - Community
Created by thethingisback on 5/6/2023 in #front-end
Forms: "for" attribute when wrapping inputs in labels
sorry, there's often weeks where I don't come here. You probably checked how this "sounds" with NVDA. To me, the point of having a label element in the first place is to also increase the hittable area, sth. that's built into the label/input relationship, and other elements don't do. In your second example, there's no benefit in using a label at all if it's tightly wrapped arpund the input (no padding), might as well be a span. In both cases there's only the placeholder visible which often is problematic, too, 'cos it's typically rendered in a dimmed, low-contrast font color, some find hard to read;.If it's not dimmed ppl might think the field already contains text and skip over, only to get presented with bizzare error message for not entering all data when they submit the form. I don't believe there is any viable reason to not have a visible and clickable label around an input element. Moving it off-sight is just some imagined "aesthetics" by designers that serves no real use whatsoever. There is no screen where you also enter data that can't also hold a couple extra pixels above the input to put a well visible label to and help target the field it belongs to. Form design is hard and can quickly become an A11Y and UX minefield if done wrong. Many forms might look pretty, but that's their whole achievement; they often still lack usability. This is my rough outline of form controls 
<label><b>The label text</b>
  <input type="..." />
  <small class="hint">Explain what data is expected</small>
  <em class="notice">Message explaining _what_ went wrong and _how_ to fix it.</em>
</label>
<label><b>The label text</b>
  <input type="..." />
  <small class="hint">Explain what data is expected</small>
  <em class="notice">Message explaining _what_ went wrong and _how_ to fix it.</em>
</label>
Typically no placeholder, "hint" and "notice" appear as required. I don't need to explain "firstname", so no "hint" needed etc. "notice" is toggled by validation with aria attributes that serve as CSS selectors. With flexbox or grid, all five different element types elements can be positioned at will and come with reasonable default styles.
55 replies
KPCKevin Powell - Community
Created by naman on 5/31/2023 in #ui-ux
Portfolio Website Help
sorry, but I'm not a fan of this layout. So I can't give you any suggestions and I'm not a marketer. Maybe one: don't just throw PDFs at people w/o warning. Actually two: there's a typo in "neighbourhood" (extra 'b') Not sure if you're aware of the difference between UX design and UI design. This is more UI work (which some may like), than UX (which I thing is terrible). However, I actually did like the typography of the first header layout (with the overlapping, outlined "designer"), although that would've been much better suited on a fashion magazin site. Have fun.
21 replies
KPCKevin Powell - Community
Created by 2602065010_Eunike Imelda C on 6/9/2023 in #ui-ux
Which one looks good ?
From other posts I believe this design would be part of a hospital site. So we're talking health care, patients, possibly life changing circumstances, a source to trust. It's content heavy articles with presumably little colloquial language, so any distracting elements is not helpful (like this textured background). People consult hospital and health case sites to get information quickly and easily. They're either sick themselves or seek information for someone they care for who is sick. Articles need to be well structured to make them scanable. Someone in a hurry or under stress doesn't have the time or nerves to read a big blob of text. Design and content architecture need to work together. Colours should not be "loud" (red, pink) and overly saturated -- having a stress migraine or anxiety one doesn't need the screen to yell at them and stuff moving around --, but rather calming (subtle nature tones, pastels) and neutral and "clean" (white, light greys). Greens appear to be common for healthcare sites 😉 UX is crucial, i.e. questionnaires and forms must be simple to use, use "normal language", support resuming, and w/o interrupting the task provide assistive instant access to explain terminology where required (i.e. in popups). However, that's how I worked over the last two decades.
14 replies
KPCKevin Powell - Community
Created by 2602065010_Eunike Imelda C on 6/9/2023 in #ui-ux
Which one looks good ?
it kinda is independent, but whatever and however insights one gets helps to design a "product/service" that serves the needs of these users and potentially pleases them using/buying it. Which also pleases your client. There's certainly content out there about different audiences and personas, so a web search might be a good start to get a broader picture. Then dive in. There's nothing new under the sun, so always check out the competition in different media. And don't be afraid to ask your client about their clients if you're new to their market segment. DON'T ever ask them for their design ideas! If they give them, nod and smile. If they have a logo and an established coorporate color scheme, try to use it. It might however not always be useful for screen + mobile design. If you need to change something (i.e. shades) explain why + the benefits of that change. It's your job to figure out how to represent them and their services once you know what their customers want, need, seek, and eventually enjoy finding on the site you're hired to create. For example: learn if is it a more content heavy subject (health) or more fun and casual (games, holidays, sports). Should it be journalistic, have interactive content or use gamification to make contents more digestible, usable, understandable for the target audience and demographic. If none of this does: ditch it and don't show off with your animation skills. For a stereotypical fashion site you'd likely use some elegant type face (not Comic Sans or Courier), loads of professional photography of the products and "moods" the site wants to sell/promote. It's all about beauty so make a "beautiful site" and learn about seasonal fashion colours that might be used on the site and change whenever Cosmopolitain and Vogue say it's time to change colours... Look at Fashion Magazines. If it's Sports: same difference. Look at Sports sites, shows and magazines. There's more "energy" involved. Then bill them 😀
14 replies
KPCKevin Powell - Community
Created by naman on 5/31/2023 in #ui-ux
Portfolio Website Help
that dot following my mouse and this "view blob" is utterly annoying, hiding text I currently want to read. what gives?
creates stunning, simple & sustainable solutions to drive tangible outcomes for mission-driven organizations.
winner of BS bingo this week. 😀 not a fan
21 replies
KPCKevin Powell - Community
Created by naman on 5/31/2023 in #ui-ux
Portfolio Website Help
@namanprat you're aware that telling people to scroll down (with scrolling text), that this "UX" stuff of yours didn't actually work then, right?
21 replies
KPCKevin Powell - Community
Created by Ali on 5/29/2023 in #ui-ux
Show expertise on sth...
the "focus on developing ai-driven apps" I suppose
14 replies
KPCKevin Powell - Community
Created by tlcheung on 6/9/2023 in #os-and-tools
Naming conventions for setting up projects
oh, forgot... Some software paradigms (and frameworks) also "dictate" how you name things. In Model View Controller (MVC) setups it's common to have separate directories and files for each w/ or w/o varying degrees of redundancy in the names: - ./Models/FubarModel.php - ./Views/FubarView.php - ./Controllers/FubarController.php or - ./Fubar/Model.php - ./Fubar/View.php - ./Fubar/Controller.php or ... ....it depends 😀
7 replies
KPCKevin Powell - Community
Created by tlcheung on 6/9/2023 in #os-and-tools
Naming conventions for setting up projects
Naming things is the hardest part in programming. If you're working with a team: adjust to the team. If you're working alone: use what's meaningful for you. Best possible answer here: it depends. It's often a good idea to name files by what the do or what they represent and what data format they're in, which is why we see "favicon.ico", "index.html", "main.js", "base.css", "Button.vue", "Panel.tsx" etc... However, "main.js" and "base.css" already are opinionated choices, and "app.js" and "core.css" could be equally valid names. Don't be cryptic or too fancy if you then have to constantly search for files in each project. Like don't use "does-cool-stuff.js" when "animations.js" would be more descriptive. That being said: some languages and tools require a certain naming convention to function out of the box or be smart(er) about the behaviour and to enhance your DX, like - certain folder structures - specific file names (index.html) + extensions (.vue) - no special characters or Unicode symbols - casing based on scope (fubar, FuBar, fuBar, fu_bar, fu-bar, FUBAR ...) You'll develop a workable and accessible system over time that suits your workflow and thinking... and level of OCD 😉 But again: If you're working with a team, adjust to the team. Have fun.
7 replies