clevermissfox Comments - Answer Overflow

Topics

clevermissfox

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

KPCKevin Powell - Community

•Created by snxxwyy on 1/16/2025 in #os-and-tools

vim | extra files

It looks like you’re showing hidden files. In windows file explorer you go to View -> Show -> Hidden Files/Folders and uncheck it. Or System files and folders sometimes. If you’re on a different os , google how to hide Hidden files and folders

10 replies

KPCKevin Powell - Community

•Created by jnakamura on 1/16/2025 in #back-end

Firebase Authentication

Im not too familiar with making multiple pages but in react we check if user is logged in, and if so show this component otherwise we show the login component Eg

return (
{ user ? <p>you’re logged in !</p> : <form> <p> login </p> </form>
)

return (
{ user ? <p>you’re logged in !</p> : <form> <p> login </p> </form>
)

Where

import { useEffect, useState } from "react";
// Firebase
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "../firebase-config";

Const [user, setUser] = useState(null);
  useEffect(() => {
    // Listen for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser); // Set the user if logged in, null otherwise
    });
    // Cleanup subscription on component unmount
    return () => unsubscribe();
  }, []);

  {
    /* Handle user sign out */
  }
  function handleSignOut() {
    signOut(auth).catch((error) => {
      console.error("Error signing out:", error);
    });
  }

import { useEffect, useState } from "react";
// Firebase
import { onAuthStateChanged, signOut } from "firebase/auth";
import { auth } from "../firebase-config";

Const [user, setUser] = useState(null);
  useEffect(() => {
    // Listen for authentication state changes
    const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
      setUser(currentUser); // Set the user if logged in, null otherwise
    });
    // Cleanup subscription on component unmount
    return () => unsubscribe();
  }, []);

  {
    /* Handle user sign out */
  }
  function handleSignOut() {
    signOut(auth).catch((error) => {
      console.error("Error signing out:", error);
    });
  }

3 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end

Responsive Canvas in Flexbox Container

This is my point , if they are cheating they are only cheating themselves because the prize is the experience.

44 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end

Responsive Canvas in Flexbox Container

It’s not as though it’s gonna affect the creator of the game or anyone other than the cheater . Most people would use an eyedropper from a browser extension anyway rather than know to go into dev tools

44 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end

Responsive Canvas in Flexbox Container

But who cares if they cheat

44 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end

Responsive Canvas in Flexbox Container

I didn’t say they aren’t fun- I’m saying I wouldn’t worry too much about cheaters as there is no incentive to cheat. You’re proving my point, it’s for fun so they are just cheating themselves out of fun

44 replies

KPCKevin Powell - Community

•Created by Tok124 (CSS Nerd) on 1/12/2025 in #front-end

Responsive Canvas in Flexbox Container

That’s a lot of effort to make sure there’s no cheating , for a game where you don’t win anything. If they cheat they’re just cheating themselves ? Not you ?

44 replies

KPCKevin Powell - Community

•Created by rctneil on 1/13/2025 in #front-end

Display none => block transition example

KPow videos usually have a linked codepen in description

37 replies

KPCKevin Powell - Community

•Created by rctneil on 1/13/2025 in #front-end

Display none => block transition example

https://youtu.be/1VsMKz4Zweg?si=TASquznGjVYqog6W https://youtu.be/vmDEHAzj2XE?si=PSnlb69KAa7oGsvr

37 replies

KPCKevin Powell - Community

•Created by ItsAmjed on 1/12/2025 in #os-and-tools

npm installing problem

Also agree, using vite is better than CRA. Just know that you need to prepend your env vars with VITE_* fyi

20 replies

KPCKevin Powell - Community

•Created by Zach on 1/12/2025 in #front-end

list or no list for nav links

Or that Products is the label

12 replies

KPCKevin Powell - Community

•Created by Zach on 1/12/2025 in #front-end

list or no list for nav links

It’s more about the context semantic elements and aria attributes give to the assistive technologies and the user. A div with a bunch of links doesn’t tell the user this is a nav menu

12 replies

KPCKevin Powell - Community

•Created by Zach on 1/12/2025 in #front-end

list or no list for nav links

Interesting that all the elements have empty class attributes

12 replies

KPCKevin Powell - Community

•Created by Zach on 1/12/2025 in #front-end

list or no list for nav links

It’s more semantic to be a nav ul li a and then you don’t need the <br/> bc <li> are block level elements

12 replies

KPCKevin Powell - Community

•Created by NIMA on 12/25/2024 in #os-and-tools

ai extension

For an example, just last night had an AI tell me to use .sort() method on a new Set . Which doesn’t work, it’s an array method. If I didn’t know that I would be going around and around with it and it would likely give me more hallucinations to “fix” why it’s “not working”. And this is a most recent example but in no way unique. A couple days ago I was having it refactor a small script to adjust Wordpress drop-down menus and it changed my selector without me noticing; 2 characters (or lack thereof) broke everything. If I was just copying and pasting what it gave me I would have no clue what happened or why it was broken. I use it to help refactor code I’ve written to be more tidy, or to add comments to a file but having it spit out something when you don’t understand the result is a recipe for disaster. And you still have to read what it gives you back , sometimes it will decide to leave out whole functions or miss a variable or change something you didn’t ask it to. Missing a comma or a parentheses , or like the example above, two characters is the difference between a working page and a total mess. You need to be able to know what and why.

37 replies

KPCKevin Powell - Community

•Created by supremeuser. on 1/2/2025 in #ui-ux

Help with responsive layout

@container queries !

7 replies

KPCKevin Powell - Community

•Created by Takyon_is_Online on 1/3/2025 in #front-end

I need help centering my table of content

Which means you can completely get rid of your Javascript file that's using the button to toggle a .dropdown element since you're using the semantic details/summary instead , and don't forget to also remove the button element and just leave the text node Table of Contents

7 replies

KPCKevin Powell - Community

•Created by drex08x on 1/2/2025 in #front-end

Need help with react, and react-router.

I may be understanding but if youll need the same navbar and hero on every page, why not make a NavBar.jsx and a Hero.jsx, then a component that holds them both

import NavBar from 'NavBar';
import Hero from 'Hero';
export default function AboveTheFold() {
return (
<>
  <NavBar />
  <Hero />
</>
)
}

//App.jsx
import AboveTheFold from 'AboveTheFold' ;
export default function App() {
  return (
  <AboveTheFold />
  <OtherPageContent />
)
}

import NavBar from 'NavBar';
import Hero from 'Hero';
export default function AboveTheFold() {
return (
<>
  <NavBar />
  <Hero />
</>
)
}

//App.jsx
import AboveTheFold from 'AboveTheFold' ;
export default function App() {
  return (
  <AboveTheFold />
  <OtherPageContent />
)
}

3 replies

KPCKevin Powell - Community

•Created by jsolly on 1/4/2025 in #front-end

Nested Checkboxes in Pure CSS. Is it possible?

Would that even be okay, that the visual states are styled but the checkbox isnt actually checked or unchecked? likely want to use the form data which wouldnt be possible without javascript to ensure the checkboxes checked state match their visuals

7 replies

KPCKevin Powell - Community

•Created by Takyon_is_Online on 1/3/2025 in #front-end

I need help centering my table of content

this one isnt centered on mobile view fyi. Looks like you did a whole refactor. if youre going to use a details/summary, you no longer need to use the button, its already an interactive element. And then is confusing with two focus jumps, one to the summary, and then another to the button inside which no longer needs to trigger anything

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li> Introduction </li> 
<!-- ... etc -->
  </ol>
</details>

<details>
  <summary>Table of Contents</summary>
  <ol>
    <li> Introduction </li> 
<!-- ... etc -->
  </ol>
</details>

7 replies