aevitas Posts - Answer Overflow

aevitas

•Created by aevitas on 7/5/2023 in #front-end

Input profanity filter

Hi, For the last day I've been searching for a (good) profanity filter for user input. It's pretty important that it's good. On my website, people can name whatever they have created and I would rather not have the following: - Racial slurs, insults, basically insert any kind of curse words / sentences - Advertisement links for gold selling, illegal porn or any other thing that may be illegal/harmful to other users So far the best npm package I have found is 'obscenity', but this seems to break the more swear words you add.

4 replies

KPCKevin Powell - Community

•Created by aevitas on 5/6/2023 in #front-end

Kind of lost on how to optimize this piece of code

Sandbox: https://codesandbox.io/s/friendly-bell-eclcq6 I'm creating a website for a game which contains certain tools. In this case it's rendering items specific to a certain class. There's generic items (ArrayTwo.jsx) and class specific ones (ArrayOne.jsx). The class is selected outside of this component, this is handled by context which is why I just hardcoded it in the example:

const selectedClass = "ClassOne";

const selectedClass = "ClassOne";

Both arrays combined is about 80-100 items (generic + class specific items). I used the useSearchDebounce to not slow the app down while typing in the searchbox, as it would jump all over the place. I haven't done much of this stuff in React yet so I'm a bit of a noob to it. It's actually the first search box I've made (which works..) and I got a bit lost in the useMemo / useEffects. I feel the array merge + sort after that is inefficient:

  useMemo(() => {
    setNewArray([...ArrayOne[selectedClass], ...ArrayTwo]);
    setNewArray((prev) =>
      prev.sort((a, b) => {
        if (a.name.toLowerCase() < b.name.toLowerCase()) {
          return -1;
        } else if (a.name.toLowerCase() > b.name.toLowerCase()) {
          return 1;
        }
        return 0;
      })
    );
  }, [selectedClass]);

  useMemo(() => {
    setNewArray([...ArrayOne[selectedClass], ...ArrayTwo]);
    setNewArray((prev) =>
      prev.sort((a, b) => {
        if (a.name.toLowerCase() < b.name.toLowerCase()) {
          return -1;
        } else if (a.name.toLowerCase() > b.name.toLowerCase()) {
          return 1;
        }
        return 0;
      })
    );
  }, [selectedClass]);

I'd like to make this better on the performance side. But having only worked on React at home, I've not been able to get any feedback on this matter.

5 replies

KPCKevin Powell - Community

•Created by aevitas on 4/8/2023 in #front-end

React state question

Hi, I've been stuck on this for a few hours now but I can't figure it out. https://codesandbox.io/s/practical-beaver-vgcmcv?file=/src/App.js I basically map over an array of items and for each item I made an input to fill in a value of the item. Filling in a value for this item should do 2 possible things: Make a new object with the e.target.name, e.target.value and object.amount or Update the value in an existing object (if this value has previously been filled in)

32 replies

KPCKevin Powell - Community

•Created by aevitas on 2/23/2023 in #front-end

Canvas question.

For a test for a possible new job I have to do animations which I've never done. It's a car on a road, if you press a button the wheels will slightly move causing the car to speed up. These wheels are 11 images, which have to be shown in about 150ms and it has to look fluid with no hiccups. Now they obviously did advice me to google and I've been searching my ass off for 3 days, found a few solutions but none of them really work. I'm having a few issues which I just can't find or figure out a fix for... - I tried rendering 11 images with position absolute, having only the first on opacity 1 and the rest on 0. This works, but I am not too keen on rendering 11 images at the same time and having 10 hidden. - I've now been trying this with canvas, but I am not sure where to go from here. All examples I see has every 'animation frame' stitched together to one big image. Also the documentation on this is confusing as hell and pretty bad.. Does anyone have a proper source for good explanation on canvas image animating? Best one I found is from freecodecamp, but this does use the stitched together image as example which doesn't solve my issue. Edit: In case you wonder, yes I told them I have no experience with this. They want to see how far I can get which includes asking in forums if needed.

8 replies

KPCKevin Powell - Community

•Created by aevitas on 1/22/2023 in #ui-ux

terrible at design / ux, request on feedback on new portfolio

Hi, I spent about 2 months on this project. I lost my first dev job a month ago so I desperately need to get this live.. I mostly wonder about UX, hopefully the UI is good too on both desktop and mobile. https://stephanvdmeijden.com - I added CTA buttons on the home page, locally I have these hidden on desktop and shown on mobile (update should be ready tomorrow). Is this a good idea? - I’m still unsure about the projects page, this went through 6 redesigns because it never worked out as well as I thought it would. - Refreshing the page gives an error now, fix coming up soon. - Github repo of the project is on the portfolio project page. In short, I’m terrible at design and seek guidance!

4 replies

KPCKevin Powell - Community

•Created by aevitas on 1/13/2023 in #os-and-tools

Netlify deployment issue

Hey, I've been deploying this project just fine 2 weeks ago but now it suddenly doesn't work. I did re-organize my component folder but I am not sure if this is what caused it, checked the imports 10 times and everything seems fine (it works locally). Error:

3:23:39 PM: $ npm run build
3:23:39 PM: > [email protected] build
3:23:39 PM: > tsc && vite build
3:23:41 PM: src/components/content/contentblock/ContentBlock.tsx(11,32): error TS2307: Cannot find module '../pages/projects/ProjectPageWrapper' or its corresponding type declarations.
3:23:41 PM: src/components/content/pages/Projects/ProjectPageWrapper.tsx(3,31): error TS2307: Cannot find module './projectnavigation/ProjectNavigation' or its corresponding type declarations.
3:23:41 PM: 
3:23:41 PM:   "build.command" failed   
3:41:52 PM:   Error message
3:41:52 PM:   Command failed with exit code 2: npm run build (https://ntl.fyi/exit-code-2)
3:41:52 PM: 
3:41:52 PM:   Error location
3:41:52 PM:   In build.command from netlify.toml:
3:41:52 PM:   npm run build
3:41:52 PM: 
3:41:52 PM:   Resolved config
3:41:52 PM:   build:
3:41:52 PM:     base: /opt/build/repo
3:41:52 PM:     command: npm run build
3:41:52 PM:     commandOrigin: config
3:41:52 PM:     publish: /opt/build/repo/dist
3:41:52 PM:     publishOrigin: config
3:41:52 PM:   redirects:
3:41:53 PM:     - from: /*
      status: 200
      to: /index.html
  redirectsOrigin: config
Caching artifacts

3:23:39 PM: $ npm run build
3:23:39 PM: > [email protected] build
3:23:39 PM: > tsc && vite build
3:23:41 PM: src/components/content/contentblock/ContentBlock.tsx(11,32): error TS2307: Cannot find module '../pages/projects/ProjectPageWrapper' or its corresponding type declarations.
3:23:41 PM: src/components/content/pages/Projects/ProjectPageWrapper.tsx(3,31): error TS2307: Cannot find module './projectnavigation/ProjectNavigation' or its corresponding type declarations.
3:23:41 PM: 
3:23:41 PM:   "build.command" failed   
3:41:52 PM:   Error message
3:41:52 PM:   Command failed with exit code 2: npm run build (https://ntl.fyi/exit-code-2)
3:41:52 PM: 
3:41:52 PM:   Error location
3:41:52 PM:   In build.command from netlify.toml:
3:41:52 PM:   npm run build
3:41:52 PM: 
3:41:52 PM:   Resolved config
3:41:52 PM:   build:
3:41:52 PM:     base: /opt/build/repo
3:41:52 PM:     command: npm run build
3:41:52 PM:     commandOrigin: config
3:41:52 PM:     publish: /opt/build/repo/dist
3:41:52 PM:     publishOrigin: config
3:41:52 PM:   redirects:
3:41:53 PM:     - from: /*
      status: 200
      to: /index.html
  redirectsOrigin: config
Caching artifacts

I looked through my Github history to double check, but I haven't changed my package.json or netlify.toml at all, nor any settings on Netlify. This project is React with Vite & TypeScript. My netlify.toml:

[build]
    command = "npm run build"
    publish = "/dist"
    base = "/"

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

[build]
    command = "npm run build"
    publish = "/dist"
    base = "/"

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

40 replies

KPCKevin Powell - Community

•Created by aevitas on 12/17/2022 in #front-end

React (Vite) importing your own fonts

43 replies

KPCKevin Powell - Community

•Created by aevitas on 12/11/2022 in #front-end

SCSS in React

I've build like 8 small projects in Reacts so far, in every project I just made a new folder (Navigation for example) with a index.js and index.scss, import the scss in the JS file and then style that specific component. I'm making a bigger project now and wanted to seperate my SCSS completely. Just make a folder called SCSS with a global SCSS import file and then make about 4 folders which contains SCSS files for the entire project. I ran into a problem when trying to use a background image.. Now obviously I could just use inline SCSS for this, but I want to use the image in an ::after, which doesn't seem possible with inline styling.. Is this possible/a good idea at all in React? Does this have any downsides?

15 replies

Gaming

Programming