StfBauer
KPCKevin Powell - Community
•Created by Lela on 4/18/2024 in #front-end
How do I force fonts to always have the same width?
It will still vary between the characters, but for example, when you like to interchange the font weight, this is better.
27 replies
KPCKevin Powell - Community
•Created by Lela on 4/18/2024 in #front-end
How do I force fonts to always have the same width?
There is only one option to make this work. The space there varies because of the legibility of those fonts. Monospace is not a help there.
The only option is to use a font that is uniwidth expecially for such usecase:
https://uxdesign.cc/uniwidth-typefaces-for-interface-design-b6e8078dc0f7
27 replies
KPCKevin Powell - Community
•Created by Ayd on 4/4/2024 in #front-end
Expanding Card Text Sizing Problem
Here is one possible option like I described before:
https://codepen.io/StfBauer/pen/MWRQEOY?editors=1100
4 replies
KPCKevin Powell - Community
•Created by Ayd on 4/4/2024 in #front-end
Expanding Card Text Sizing Problem
Wrap the text and make it 100% of what the final result will. Make the overflow only happen on the outer wrapper of the text. This should slide it out from underneath the card then and do not wrap the text during animation.
4 replies
KPCKevin Powell - Community
•Created by StfBauer on 1/10/2024 in #os-and-tools
CSS Comb Replacement
Seems to be more like a bug and I opened an issue - Did a cross check with a plain CSS, which worked to fix all errors.
What does not work when the property sorting into the mix.
10 replies
KPCKevin Powell - Community
•Created by StfBauer on 1/10/2024 in #os-and-tools
CSS Comb Replacement
Nope sadly not 😦
10 replies
KPCKevin Powell - Community
•Created by StfBauer on 1/10/2024 in #os-and-tools
CSS Comb Replacement
Stylelint from command line works but not in VScode
10 replies
KPCKevin Powell - Community
•Created by StfBauer on 1/10/2024 in #os-and-tools
CSS Comb Replacement
OK I try to switch now over to vscode style lint - Command line looks great but Visual Studio cannot autofix the issues. Any suggestions?
10 replies
KPCKevin Powell - Community
•Created by ZomaTheMasterOfDisaster on 1/27/2024 in #os-and-tools
Docker dev containers or ways to use docker without installing development tools on host machine
Well basically a Docker container is nothing else like a tiny virtual machine that is running on your desktop. The come with a full OS and apps as you need them. I rewrite for example my wordpress blog currently with a docker container. You can use for example this one - https://hub.docker.com/r/bitnami/wordpress
It is the same engine a bit small as you would get for example at Google Cloud or Amazon Lightsail.
For coding I have mapped a local directory for my wordpress resources, which means I can build for example the SASS files locally but update automatically in the VM. Modify PHP files localy but those are already reflected as mapped folder in the Docker container. Normally the VM looses all there data on restart but you can even have the database files locally mapped into the VM.
There are countless options that you can do using Docker Files. Since they do not come with any graphical user interface you cannot really install development tools to it. Ok - You can use VI or other Linux based shell editors.
Never tried to run an linux x server on them and I guess it wouldn't even be possible or at least I haven't tried it - https://riptutorial.com/docker/example/21831/running-gui-apps-in-a-linux-container
2 replies
KPCKevin Powell - Community
•Created by Tenkes on 1/6/2024 in #front-end
Next.js | What to use for icons?
We made a dedicated react control for a front-end framework that I created and maintained that implements Microsoft's Fluent Design. It lets you load a SVG symbol/glyph set into React. This way, you can manage all the assets from one or more centralised SVG files directly. Instead of messing around with copy SVG directly into your React code.
https://lab.n8d.studio/htwoo/htwoo-react/?path=/docs/introduction-getting-started--docs#3-initialze-basic-svg-icons
The Benefit - It's easy to update and maintain.
https://css-tricks.com/pretty-good-svg-icon-system/
This supports nearly 3000+ icons, too, with a minimal impact because you can pick and choose which icons to embed and can even add your own stuff, such as custom logos or select single or multiple icons from other icon systems.
https://lab.n8d.studio/htwoo/htwoo-core/patterns/design-tokens-icon-overview/design-tokens-icon-overview.rendered.html
3 replies