celine Comments - Answer Overflow

No, it wasn't the mask. So, first of all, I inspected the element and it points to a path in the SVG. Path is basically a list of instructions (i.e. pick up the pen and move it to { x, y }, put down a pen and draw a bezier curve etc. When I first saw the svg code I thought the problem was H0 in path because that is responsible for the straight horizontal line, however as I said earlier after removing it the wave breaks down. The SVG editor things I used: https://mediamodifier.com/svg-editor (this one showed the border of #000 of 1px, but I couldn't find a way to remove it) https://yqnn.github.io/svg-path-editor/ (here you can see how the wave breaks when you delete that H0 line)

19 replies

KPCKevin Powell - Community

•Created by smgy94 on 1/26/2024 in #front-end

SVG Image creating a funny outline

it's not about the HTML elements, it's more about the rendering and SVG structure, I've tried to play with SVG's path and some editors showed that provided SVG has a black (#000) border of 1px, however removing it completely broke the wave

19 replies

KPCKevin Powell - Community

•Created by smgy94 on 1/26/2024 in #front-end

SVG Image creating a funny outline

I've never used wave generators. Maybe try using a .png that's 2x or 4x the size of the past SVG, and then through CSS scale reduce it to the right value, but this solution is so meh, yet I don't have any other solutions on my mind

19 replies

KPCKevin Powell - Community

•Created by smgy94 on 1/26/2024 in #front-end

SVG Image creating a funny outline

Hey, seems that SVG's path is kinda unfinished?? Lemme explain Every time your shape goes through the middle of the pixels, you'll get gray pixels because of the anti-aliasing that 2D renderers use. In such cases, a LIKELY solution is to use the SVG shape-rendering="crispEdges" attribute to disable anti-aliasing by the browser. https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering. This value indicates that the user agent shall attempt to emphasize the contrast between clean edges of artwork over rendering speed and geometric precision. To achieve crisp edges, the user agent might turn off anti-aliasing for all lines and curves or possibly just for straight lines which are close to vertical or horizontal. Also, the user agent might adjust line positions and line widths to align edges with device pixels. However, there is no universal, 100% solution to the pixelization problem. Since 2D rendering depends on the installed operating system, its settings, video card and what browser is used. You can use a complex approach: Use integer values of SVG image coordinates If you take a ready-made image with fractional values, you can process it with SVG optimizer Set integer value of viewBox Use attribute shape-rendering ="crispEdges" .. or.. maybe use a different SVG wave generator

19 replies

KPCKevin Powell - Community

•Created by GHOST 👻 on 1/26/2024 in #front-end

REACT JS Error

You forgot to import proptypes module import PropTypes from 'prop-types'; And also there's no validation for the prop: i.e: Content.propTypes = { creatorname: PropTypes.string.isRequired, }; For more information on this you can read https://react.dev/reference/react/Component#static-defaultprops

7 replies

KPCKevin Powell - Community

•Created by obodo on 1/26/2024 in #front-end

Tailwind Stressful

you're absolutely right with this, I like how vue solves this problem, yet i dont like how im forced to write my components the certain way

11 replies

KPCKevin Powell - Community

•Created by obodo on 1/26/2024 in #front-end

Tailwind Stressful

ehh, not really, I started using Tailwind after several years of SCSS, it wasn't that I blindly chose Tailwind and tried to educate myself on it

11 replies

KPCKevin Powell - Community

•Created by obodo on 1/26/2024 in #front-end

Tailwind Stressful

I like to style my react components in next js using it

11 replies

KPCKevin Powell - Community

•Created by obodo on 1/26/2024 in #front-end

Tailwind Stressful

I'm a big supporter of Tailwind, but at first I had a very hard time working with it: problems with classes (some names took me a long time to get used to), I was intimidated by the messy HTML, and there were situations where I needed to do something that Tailwind wouldn't let me do. However, 5 years of working with CSS doesn't compare to the speed of work I picked up after a week to a week and a half of using Tailwind. Now my development experience using Tailwind is wonderful. It really is a level up in almost every regard and I havent found anything that comes close. I can't say that I agree with all the decisions of the Tailwind dev team, however if I need to use NOT vanilla CSS, I always choose Tailwind

11 replies

KPCKevin Powell - Community

•Created by Jonah on 1/20/2024 in #front-end

New to JavaScript

But diving in Javascript is amazing and it will help your developer growth, for accordion realization, you need to add a class (for example, "active") on click foreach of the accordion-wrappers and you will get this cool effect

5 replies

Gaming

Programming