Javanoscript - Day 35

Squash Object

Implement a function that returns a new object after squashing the input object into a single level of depth where nested keys are "squashed" together with a period delimiter (.).

Examples

const object = {
  a: 5,
  b: 6,
  c: {
    f: 9,
    g: {
      m: 17,
      n: 3,
    },
  },
};

squashObject(object); // { a: 5, b: 6, 'c.f': 9, 'c.g.m': 17, 'c.g.n': 3 }

Any keys with null-ish values (null and undefined) are still included in the returned object.

const object = {
  a: { b: null, c: undefined },
};
squashObject(object); // { 'a.b': null, 'a.c': undefined }

It should also work with properties that have arrays as the value:

const object = { a: { b: [1, 2, 3], c: ['foo'] } };
squashObject(object); // { 'a.b.0': 1, 'a.b.1': 2, 'a.b.2': 3, 'a.c.0': 'foo' }

Empty keys should be treated as if that "layer" doesn't exist.

const object = {
  foo: {
    '': { '': 1, bar: 2 },
  },
};
squashObject(object); // { foo: 1, 'foo.bar': 2 }

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 36

useInputControl

Implement a useInputControl hook that manages a controlled input value and tracks additional form input states like:

[Property : Tracks : When it becomes true : When it becomes false]

* Touched : If input has been focused then blurred : When the user blurs the input (focus -> blur) : Never resets automatically

* Dirty : If value has been changed before : When the user types something Never resets automatically : -

* Different : If value is different from the original : When the value is different from the initial : When the value is same as the initial

The handleX functions returned by the hook are meant to be called on the relevant event handlers of <input> in order for the hook to work as intended.

export default function Component() {
  const nameInput = useInputControl('Oliver');

  return (
    <form>
      <div>
        <label htmlFor="name">Name</label>
        <input
          id="name"
          value={nameInput.value}
          onChange={nameInput.handleChange}
          onBlur={nameInput.handleBlur}
        />
      </div>
      <p>Touched: {nameInput.touched.toString()}</p>
      <p>Dirty: {nameInput.dirty.toString()}</p>
      <p>Different: {nameInput.different.toString()}</p>
      <button type="submit" disabled={!nameInput.different}>
        Submit
      </button>
      <button type="button" onClick={nameInput.reset}>
        Reset
      </button>
    <form>
  );
}

Arguments

- initialValue: string: The initial value of the input

Returns

The hook returns an object with the following properties:

- value: string: The current value of the input
- dirty: boolean: Whether the user has been modified at least once
- touched: boolean: Whether the input was focused and blurred
- different: boolean: Whether the value is different from the initial value
- handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void: A function that updates the value of the input
- handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void: A function that to be called when the input is blurred
- reset: () => void: A function to reset to the initial value as well as the value of all states

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 37

useMediaQuery

Implement a useMediaQuery hook that subscribes and responds to media query changes (e.g. screen size, resolution, orientation, etc.).

export default function Component() {
  const isSmallDevice = useMediaQuery('only screen and (max-width: 768px)');

  return <div>{isSmallDevice && <a href="#">Menu</a>}</div>;
}

Hint: The window.matchMedia API would be helpful.

Arguments

- query: string: The media query to match. It must be a valid CSS media query string

Returns

The hook returns a boolean value that indicates whether the media query is a match.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

نت وصل شد

با همراه اول

این هم صحبت‌های آقای خسروی
داره در مورد کارآفرینی حرف میزنه
میگه بازداشت شده بودم ، توی ایران کار میکنی خودش خلافه.

میگه این تفکر وجود نداره که کارآفرین داره به کشور خدمت میکنه

https://www.instagram.com/reels/DOs_I7kDeQP/

اینجا هم در مورد پدر پولدار پدر فقیر صحبت میکنه

https://www.instagram.com/reels/DJMyAD4CFOw/

میخواستم کلی چیز بنویسم ولی واقعا دیگه از حرف زدن گذشته.

هر فکری خودتون میکنید صحیحه.

با چی وصل میشید؟

پست غیر فنی ، غیر جنگی

این تصویر رو ببینید. کسی که اینو نوشته فکر نکرده که شاید نفر مقابل هم دقیقا همین نظر رو در موردش داره.

توی خیلی از مسایل زندگیمون ، این مشابهت وجود داره. وقتی موضوعی پیش میاد ، همیشه این رو در نظر داشته باشید که یک سرش ، خودتونید و چه بسا که مشکل اصلی هم خودتون باشید.