pb-travelog
KPCKevin Powell - Community
•Created by clevermissfox on 10/4/2024 in #front-end
Gradient Border Animation
https://ryanmulligan.dev/blog/css-property-new-style/ Read this recently. This feels pretty similar.
40 replies
KPCKevin Powell - Community
•Created by theseeker on 10/4/2024 in #front-end
Alignment
You'll need specific html/css for each time you want to use a special character. Doing that once in the html is easy but each time you'd have have to repeat this pattern. Now imagine if you have more devs on the project or more pages where you need this pattern. Over time you incur a technical debt because of this decision. If you change fonts you'll have to find all places where you use this pattern to see if it was impacted by the font change.
19 replies
KPCKevin Powell - Community
•Created by theseeker on 10/4/2024 in #front-end
Alignment
🙂 Please mark this thread as solved.
19 replies
KPCKevin Powell - Community
•Created by theseeker on 10/4/2024 in #front-end
Alignment
You could have the '@' character in a nested span allowing you to control it line positioning independently of the other text but this becomes harder to manage over time.
19 replies
KPCKevin Powell - Community
•Created by theseeker on 10/4/2024 in #front-end
Alignment
It is unlikely that this is a tailwind css issue. The codepen doesn't have any fonts selected which mean that the browser default is used also the tailwind template has not been used.
But it looks like it is a font issue rather than a tailwind issue. Special characters are treated differently based on how the font designer created them. They can have what look like different baselines to other characters. You might have to isolate the '@' character to adjust its alignment seperately.
19 replies
KPCKevin Powell - Community
•Created by theseeker on 10/4/2024 in #front-end
Alignment
Can you please share a codepen? There's not much to go on to help here.
19 replies
KPCKevin Powell - Community
•Created by snxxwyy on 10/3/2024 in #front-end
use strict & data storage
Ello. I'll try to give you some answers.
1. The use of use-strict will prevent you from doing silly things like having multiple variables declared with the same name. An example is
Javascript allows you to do this but with strict mode an error will be thrown. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
2. The data for the different tabs should be in the html using css/js to hide show the content. If the data is consistent and known beforehand this is the best for accessibility reasons.
If you're fetching the tabs dynamically then you could use the innerText/innerHTML to swap out the contents however there is additional overhead on the server and client to make this happen.
40 replies
KPCKevin Powell - Community
•Created by Aanuoluwapo Joshua on 10/4/2024 in #front-end
My letter got scatter due to my css styling
It looks like your text is wrapping inside of the H1 container. If you decrease the font size it will probably be fine.
The image contains the localised date string of HH:MM:SS AM|PM.
11 replies
KPCKevin Powell - Community
•Created by Nikita on 8/31/2024 in #ui-ux
Help me improve UX of this thing
After looking at the image, i am unsure of how to create a new ticket. It seems like you can update an existing one but then the submit button text would need to chage.
Additionally with updating an existing one, it would probably be nice to have a history of what had happened with the ticket otherwise you're forcing the user to remember a previous state.
33 replies
KPCKevin Powell - Community
•Created by Lucas Carlesso on 8/29/2024 in #front-end
Headings: Is “Preparation time” a `<h2>`?
Im not suggesting that it be an h3 because of size but more because of the relative importance of the information contained within. But you are correct, it should be an h2 tag based on the document flow. I will amend the suggested document flow.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#nesting
9 replies
KPCKevin Powell - Community
•Created by empty on 8/29/2024 in #front-end
how to style for long text
https://www.caniemail.com/ Is a handy resource when you need to see what css properties are supported by email clients. Email html/css is the devil.
https://www.caniemail.com/search/?s=text-overflow
You might have better results by adding in the linebreak manually. This will not affect the url. I know its not great but again its email.
4 replies
KPCKevin Powell - Community
•Created by Bartastic on 8/29/2024 in #front-end
Is there a way to make the text wrap around the picture in this grid layout?
https://www.youtube.com/watch?v=Bp3sEXCYnSM Is a new video which helps with wrapping and custom shapes. Not sure how it works with grid so it could use some experimentation.
5 replies
KPCKevin Powell - Community
•Created by Lucas Carlesso on 8/29/2024 in #front-end
Headings: Is “Preparation time” a `<h2>`?
Looking at the image i would lay out the content tree like this:
h1: Simple Omlette Recipe
p
h2: Preparation time
ul
h2: Ingredients
ul
h2: Instructions
ol
h2: Nutrition
p
table
The "Preparation time" is an important bit of information for a person who wants to make this recipe. Because it has relevance when making the dish it should be treated with more care. Also by making it a header, you get an SEO and A11y boost.
The heading tree will be as follows:
1. H1: Simple Omlette Recipe
i. H2: Preparation time
ii. H2: Ingredients
iii. H2: Nutrition
9 replies
KPCKevin Powell - Community
•Created by londonpete_harrison on 8/29/2024 in #front-end
Change the order of <Form> elements
I mean you could change the position and the order of the elements but this will cause many accessibility issues as you've changed the tab order of those elements.
This is generally considered a bad idea. I would need a better understanding of what you're trying to do and your current setup. Changing the display order is not something to consider lightly.
9 replies
KPCKevin Powell - Community
•Created by Jesus Castane on 8/19/2024 in #front-end
is 960grid still relevant? if not, what's the alternative?
The 960 grid hails from a time when designeres were joining the web without understanding of how the web works. They were taking a system they were used to for print and trying to recreate it on the web.
The responsive web was never really about recreating a grid system. With new css features like container queries, minmax, grid and others we have more control than ever before. The web is fluid we are finally at a stage where we can fully embrace the medium of the browser. The web is much more powerful than than print could ever be.
9 replies
KPCKevin Powell - Community
•Created by 存恺汇 on 8/16/2024 in #front-end
How to make a dynamic chart component in Svelte, using plain HTML and CSS with minimal JS?
Do you have some examples of what types of charts you're trying to incorporate?
12 replies
KPCKevin Powell - Community
•Created by rctneil on 8/14/2024 in #front-end
Modern CSS without tools
You could go the import route but as was mentioned above you will have multiple network requests. So from a performance standpoint you might not want to go down that route.
If you just want to deal with css you could go down the route listed here. https://frontendmasters.com/blog/fine-ill-use-a-super-basic-css-processing-setup/
If you want more scoped properties you could create web components https://component-odyssey.com/articles/01-writing-components-that-work-in-any-framework.
Hope this gives you some ideas.
197 replies