learn_programming

This magazine is from a federated server and may be incomplete. Browse more on the original instance.

ericjmorey, in Linux Upskill Challenge - Learn the skills required to sysadmin a remote Linux server from the commandline.
@ericjmorey@programming.dev avatar

IJBOL Who is down voting this?

ericjmorey, in I'm posting a daily Dart solution to last year's Advent of Code challenges
@ericjmorey@programming.dev avatar

Advent of Code is a great resource.

Thanks for sharing mykl!

ericjmorey, in Looking for a studying mate
@ericjmorey@programming.dev avatar

Test

ericjmorey, in Looking for a studying mate

Hey. I don’t think lemmy.world is federating properly with programming.dev/c/learn_programming. I tried reaching out to you with my programming.dev account. I’ve copied my message below:

What course is it?

I’d be happy to be an accountability buddy. We can use a Web Development focused Matrix Room to regularly check in and discuss what we’re working on.

CriticalMiss,

Hey! My work provides a Udemy Business license so I can select any of the “verified” courses for free, I chose to go with this one:

udemy.com/…/the-complete-web-development-bootcamp…

Seems to be solid so far, just wrapped up part 7 and got most of the basics of CSS.

I did join the matrix chat. My name there is the same as here.

ericjmorey,

Awesome! I sent some messages via Matrix

ericjmorey,
@ericjmorey@programming.dev avatar

test 3

ericjmorey, in ADHD, finishing projects and being independent
@ericjmorey@programming.dev avatar

This post created a great discussion. Thanks for getting it started.

ericjmorey, (edited ) in Looking for a studying mate
@ericjmorey@programming.dev avatar

What course is it?

I’d be happy to be an accountability buddy. We can use a Web Development focused Matrix Room to regularly check in and discuss what we’re working on.

ericjmorey,
@ericjmorey@programming.dev avatar

test 2

Bldck, in I'm looking for a way to store data in a specific folder in the docker container

Try adding app.volumes to the yaml


<span style="color:#323232;">
</span><span style="color:#323232;">volumes:
</span><span style="color:#323232;">     - /tmp/uploads:/uploads
</span><span style="color:#323232;">
</span>
abbadon420,

Thank you so much, this works perfectly! I’d been trying things with volumes, but never thought to add it to the “app” service XD

otl, in Can anyone walk me through a React phone component?
@otl@lemmy.sdf.org avatar

Hard to troubleshoot without a fuller example.

when I use my data handler function to raise the value to the parent, it doesn’t work.

What doesn’t work? What is happening? Is the function returning some unexpected value? Some exception being thrown? Does some other component get in an unexpected state?

Hopefully we can help out with some more context :)

Decide,

Hey, I’m just now seeing this. So, my component hierarchy is something like this:

App

  • Form
    • TextInput
    • PhoneInput

The TextInput components are very simple:


<span style="color:#323232;">import { ErrorMessage } from "../ErrorMessage"; //this function can be used to determine if the error message renders based on criteria
</span><span style="color:#323232;">
</span><span style="color:#323232;">export const FunctionalTextInput = ({
</span><span style="color:#323232;">  dataProperty,
</span><span style="color:#323232;">  errorMessage,
</span><span style="color:#323232;">  placeholder,
</span><span style="color:#323232;">  value,
</span><span style="color:#323232;">  propertyHandler,
</span><span style="color:#323232;">}: {
</span><span style="color:#323232;">  dataProperty: string;
</span><span style="color:#323232;">  errorMessage: string;
</span><span style="color:#323232;">  placeholder: string;
</span><span style="color:#323232;">  value: string;
</span><span style="color:#323232;">  propertyHandler: (property: string, e: string) => void;
</span><span style="color:#323232;">}) => {
</span><span style="color:#323232;">  //Object.keys(initialUserData)[0]
</span><span style="color:#323232;">  return (
</span><span style="color:#323232;">    &lt;>
</span><span style="color:#323232;">      <div>
</span><span style="color:#323232;">        {dataProperty}:
</span><span style="color:#323232;">         propertyHandler(dataProperty, e.target.value)}
</span><span style="color:#323232;">        />
</span><span style="color:#323232;">      </div>
</span><span style="color:#323232;">      
</span><span style="color:#323232;">    
</span><span style="color:#323232;">  );
</span><span style="color:#323232;">};
</span>

<span style="color:#323232;">export const FunctionalTextInput = ({
</span><span style="color:#323232;">  dataProperty,
</span><span style="color:#323232;">  errorMessage,
</span><span style="color:#323232;">  placeholder,
</span><span style="color:#323232;">  value,
</span><span style="color:#323232;">  propertyHandler,
</span><span style="color:#323232;">}: {
</span><span style="color:#323232;">  dataProperty: string;
</span><span style="color:#323232;">  errorMessage: string;
</span><span style="color:#323232;">  placeholder: string;
</span><span style="color:#323232;">  value: string;
</span><span style="color:#323232;">  propertyHandler: (property: string, e: string) => void;
</span><span style="color:#323232;">}) => {
</span><span style="color:#323232;">  //Object.keys(initialUserData)[0]
</span><span style="color:#323232;">  return (
</span><span style="color:#323232;">    &lt;>
</span><span style="color:#323232;">      <div>
</span><span style="color:#323232;">        {dataProperty}:
</span><span style="color:#323232;">         propertyHandler(dataProperty, e.target.value)}
</span><span style="color:#323232;">        />
</span><span style="color:#323232;">      </div>
</span><span style="color:#323232;">      
</span><span style="color:#323232;">    
</span><span style="color:#323232;">  );
</span><span style="color:#323232;">};
</span>

The shape of my data is like so:


<span style="color:#323232;">export type UserInformation = {
</span><span style="color:#323232;">  firstName: string;
</span><span style="color:#323232;">  lastName: string;
</span><span style="color:#323232;">  email: string;
</span><span style="color:#323232;">  city: string;
</span><span style="color:#323232;">  phone: string[];
</span><span style="color:#323232;">};
</span>

In my Form Component, I have two functions that work in the TextInput component, but not the PhoneInput component.


<span style="color:#323232;">const dataHandler = (e: FormEvent) => {
</span><span style="color:#323232;">    e.preventDefault();
</span><span style="color:#323232;">    userDataHandler(formData);
</span><span style="color:#323232;">    setFormData(initialUserData);
</span><span style="color:#323232;">  };
</span><span style="color:#323232;">const propertyHandler = (property: string, value: string) => {
</span><span style="color:#323232;">    setFormData((prevProp) => ({ ...prevProp, [property]: value }));
</span><span style="color:#323232;">  };
</span>

So, over the past few hours I’ve been trying to talk to bing about this, and get some answers. After a few hours, I finally think the problem is a conflict of state. It seems like the state I’m using in my PhoneInput component interferes with the state of the parent component. This seems to be the case since when I click submit, my dataHandler function doesn’t trigger for the PhoneInput component.

So, I guess now I’m wondering how that works? I’ve heard of raising state to the parent, but passing state down, not as data, but as actual state, sounds difficult and somewhat complex. I’m wondering how to use this technique, the uses, and how I can determine when to use it. Or, better yet, maybe I’m missing something and the answer is right outside my reach.

The phone input in question:


<span style="color:#323232;">// This is a component that is used for the phone input
</span><span style="color:#323232;">// it wall accept 4 inputs, and "lift" the values to the parent component as a single, unformatted string.
</span><span style="color:#323232;">
</span><span style="color:#323232;">import { ChangeEventHandler, useRef, useState } from "react";
</span><span style="color:#323232;">import { ErrorMessage } from "../ErrorMessage";
</span><span style="color:#323232;">
</span><span style="color:#323232;">type TPhoneInputProps = {
</span><span style="color:#323232;">  errorMessage: string;
</span><span style="color:#323232;">  dataProperty: string;
</span><span style="color:#323232;">  higherPhoneState: string[];
</span><span style="color:#323232;">  propertyHandler: (property: string, e: string) => void;
</span><span style="color:#323232;">};
</span><span style="color:#323232;">export const FunctionalPhoneInput = ({
</span><span style="color:#323232;">  errorMessage,
</span><span style="color:#323232;">  dataProperty,
</span><span style="color:#323232;">  higherPhoneState,
</span><span style="color:#323232;">  propertyHandler,
</span><span style="color:#323232;">}: TPhoneInputProps) => {
</span><span style="color:#323232;">  const [phoneState, setPhoneState] = useState(["", "", "", ""]);
</span><span style="color:#323232;">  const phoneNumber = [
</span><span style="color:#323232;">    useRef(null),
</span><span style="color:#323232;">    useRef(null),
</span><span style="color:#323232;">    useRef(null),
</span><span style="color:#323232;">    useRef(null),
</span><span style="color:#323232;">  ];
</span><span style="color:#323232;">  const phoneNum0 = phoneNumber[0];
</span><span style="color:#323232;">  const phoneNum1 = phoneNumber[1];
</span><span style="color:#323232;">  const phoneNum2 = phoneNumber[2];
</span><span style="color:#323232;">  const phoneNum3 = phoneNumber[3];
</span><span style="color:#323232;">  const phoneChangeController =
</span><span style="color:#323232;">    (
</span><span style="color:#323232;">      index: 0 | 1 | 2 | 3 //  1 | 2 | 3 | 4,
</span><span style="color:#323232;">    ): ChangeEventHandler =>
</span><span style="color:#323232;">    (e: React.ChangeEvent) => {
</span><span style="color:#323232;">      const length = [2, 2, 2, 1];
</span><span style="color:#323232;">      const nextInput = phoneNumber[index + 1];
</span><span style="color:#323232;">      const prevInput = phoneNumber[index - 1];
</span><span style="color:#323232;">      const maxLength = length[index];
</span><span style="color:#323232;">      const value = e.target.value;
</span><span style="color:#323232;">      const shouldGoToNextInput =
</span><span style="color:#323232;">        maxLength === value.length &amp;&amp; nextInput?.current;
</span><span style="color:#323232;">      const shouldGoToPrevInput = value.length === 0;
</span><span style="color:#323232;">      const newState = phoneState.map((phone, phoneIndex) =>
</span><span style="color:#323232;">        index === phoneIndex ? e.target.value : phone
</span><span style="color:#323232;">      );
</span><span style="color:#323232;">      if (shouldGoToNextInput) {
</span><span style="color:#323232;">        nextInput.current?.focus();
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">      if (shouldGoToPrevInput) {
</span><span style="color:#323232;">        prevInput.current?.focus();
</span><span style="color:#323232;">      }
</span><span style="color:#323232;">      setPhoneState(newState);
</span><span style="color:#323232;">      console.log(newState.join(""));
</span><span style="color:#323232;">      console.log(dataProperty);
</span><span style="color:#323232;">
</span><span style="color:#323232;">      // Concatenate the new state with e.target.value to get the full phone number
</span><span style="color:#323232;">      // const fullPhoneNumber =
</span><span style="color:#323232;">      //   newState.slice(0, index).join("") +
</span><span style="color:#323232;">      //   e.target.value +
</span><span style="color:#323232;">      //   newState.slice(index + 1).join("");
</span><span style="color:#323232;">      propertyHandler(dataProperty, newState.join(""));
</span><span style="color:#323232;">    };
</span><span style="color:#323232;">  return (
</span><span style="color:#323232;">&lt;> 
</span><span style="color:#323232;"><div>
</span><span style="color:#323232;">        Phone:
</span><span style="color:#323232;">        <div>
</span><span style="color:#323232;">          
</span><span style="color:#323232;">          -
</span><span style="color:#323232;">          
</span><span style="color:#323232;">          -
</span><span style="color:#323232;">          
</span><span style="color:#323232;">          -
</span><span style="color:#323232;">          
</span><span style="color:#323232;">        </div>
</span><span style="color:#323232;">      </div>
</span><span style="color:#323232;">
</span><span style="color:#323232;">  );
</span><span style="color:#323232;">};
</span>

Please note that this component is 1000% broken. I was in the process of changing it with Bings suggestions, but it’s frustrating getting anything useful out of the thing.

Decide,

If there’s any links, resources, mental models, or anything that you or anyone else think would be helpful in getting this to work, I’m all ears. Also, since it’s pretty obvious that this is an assignment, my limitation is that I cannot use useEffect, and the PhoneComponent has to use 4 inputs.

I’ve been stuck on this for about a week now, so any help, feedback, insight, or articles I should read would be incredibly appreciated.

otl, (edited )
@otl@lemmy.sdf.org avatar

Thanks! Some quick thoughts.

Recommend staying away from LLMs (Bing, ChatGPT et al.) for now.

Take a look at Sharing data between components from the official React quick start guide.

Try thinking about what is required without thinking about React. I think we need 4 input elements. The value of those elements needs to be concatenated and displayed to the user. Is that right?

From there, we can work out a way to implement what we need using React. Thinking this way helps us start with an even simpler implementation e.g. using just 1 input element instead of 4.

There’s a few things we don’t need right now: unused props like errorMessage, useRef(), and changing focus.

I’ve heard of raising state to the parent, but passing state down, not as data, but as actual state, sounds difficult and somewhat complex.

I think what you’re talking about are Signals from Preact? This feature isn’t required right now and it introduces complexity; I personally find it hard to juggle extra concepts in my head especially when starting out with some new tooling.

If you’re still interested we could try writing a couple of basic components that get us part of the way there.

Decide,

I’ll stay away from the LLMs for now – they’re largely unhelpful anyway.

The value of those elements needs to be concatenated and displayed to the user. Is that right?

Right. The other components with a single text box seem to work fine, it’s the multiple boxes in the phone component, and it’s local state, that are confusing me to no end.

I think what you’re talking about are Signals from Preact?

Oh, no, when I was talking to Bing it said that the local state interferes with the parent state, so I instead need to bring the parent state into the child. It sort of makes sense? At least the part that local and parent state can interfere with each other makes sense.

If you’re still interested we could try writing a couple of basic components that get us part of the way there.

Please, I’m all ears. I have a feeling that your approach will help me a lot.

otl,
@otl@lemmy.sdf.org avatar

Ok! Just so I’m clear on what we need to do, what do you think the final HTML would look like? Happy to keep comms over Lemmy but email might be easier than fighting with Lemmy’s markdown renderer. My deets are at www.olowe.co/about.html in “Contact”

Decide, (edited )

For sure, I’ll send you an email.

edit: sent. Thank you again for the help.

expertmadman, in Why am I getting this unexpected arguments warning in python?

Pretty sure it’s a bug in pycharm.

youtrack.jetbrains.com/issue/PY-28663

OsrsNeedsF2P, in Why am I getting this unexpected arguments warning in python?

Does User have it’s own init? That would probably fix it

otl, in Getting Started with React: A Step-by-Step Guide
@otl@lemmy.sdf.org avatar

This doesn’t seem to provide much over the official tutorials at react.dev/learn

otl, in What is a good way to get better at c?
@otl@lemmy.sdf.org avatar

If it matters, what I eventually want to graduate into doing is fixing bugs on the linux kernel.

The Linux kernel is pretty big. One thing you could try to do is start studying similar but smaller kernels. This can make it a lot easier & quicker to experiment with. Plan 9 and OpenBSD come to mind.

ericjmorey, in Getting Started with React: A Step-by-Step Guide
@ericjmorey@programming.dev avatar

I thought create-react-app wasn’t the recommended way to set up a react project these days

harendra21,

You are correct, after march 2023 facebook dropped the support for CRA, but we can still use it for learning purpose. Thank you for suggestion.

jim, in Python: Struggling with typing module's callable type
@jim@programming.dev avatar

The first way to use it is with any type annotation: you just use it for documentation.


<span style="color:#323232;"># int annotation
</span><span style="color:#323232;">def add_1_to_number(x: int) -> int:
</span><span style="color:#323232;">    return x + 1
</span><span style="color:#323232;">
</span><span style="color:#323232;"># callable annotation
</span><span style="color:#323232;">def printer(x: int, func: Callable[[int], int]) -> None:
</span><span style="color:#323232;">    results = func(x)
</span><span style="color:#323232;">    print(f"Your results: {results}")
</span>

These type annotations can help document and make editors parse your code to make suggestions/auto-complete work better.

The second way to use it is by creating a callable. A callable is an abstract base class that requires you to implement the __call__ method. Your new callable can be called like any function.


<span style="color:#323232;">class Greeter(Callable):
</span><span style="color:#323232;">
</span><span style="color:#323232;">    def __init__(self, greeting: str):
</span><span style="color:#323232;">        self.greeting = greeting
</span><span style="color:#323232;">
</span><span style="color:#323232;">    def __call__(self, name: str):
</span><span style="color:#323232;">        print(f"{self.greeting}, {name}")
</span><span style="color:#323232;">
</span><span style="color:#323232;">
</span><span style="color:#323232;">say_hello = Greeter("Hello") # say_hello looks like a function
</span><span style="color:#323232;">say_hello("jim")  # Hello, jim
</span>
pileghoff, in What is a good way to get better at c?

Avoid projects that require a lot of memory management to begin with. Usually embedded is a good place to start because of this, while a desktop app is a bad place to start. Learn what c is good at (fast memory effecient stuff) and avoid stuff where c has largely been replaced for good reasons.

wtry,

this may be unrelated and super late, but what language usually compliments c for what it can’t do?

pileghoff,

One of C’s main painpoints is that development is slow. I work in embedded and there people usually use python or another scripting language along c, to handle tasks where performance and memory footprint os not an issue and you just want to build something, and then save c for when you really need it.

  • All
  • Subscribed
  • Moderated
  • Favorites
  • random
  • uselessserver093
  • Food
  • aaaaaaacccccccce
  • test
  • CafeMeta
  • [email protected]
  • testmag
  • MUD
  • RhythmGameZone
  • RSS
  • dabs
  • TheResearchGuardian
  • Ask_kbincafe
  • KbinCafe
  • feritale
  • Socialism
  • oklahoma
  • SuperSentai
  • KamenRider
  • All magazines