Javascript - Day 33

Promise.all

" Promise.all() is a method that takes an iterable of elements (usually Promises) as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will resolve when all of the input's promises have resolved, or if the input iterable contains no promises. It rejects immediately upon any of the input promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error. "

Promise.all() is frequently used when there are multiple concurrent API requests and we want to wait for all of them to have completed to continue with code execution, usually because we depend on data from both responses.

const [userData, postsData, tagsData] = await Promise.all([
  fetch('/api/user'),
  fetch('/api/posts'),
  fetch('/api/tags'),
]);

Let's implement our own version of Promise.all(), a promiseAll function, with the difference being the function takes in an array instead of an iterable. Be sure to read the description carefully and implement accordingly!

Examples

// Resolved example.
const p0 = Promise.resolve(3);
const p1 = 42;
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('foo');
  }, 100);
});

await promiseAll([p0, p1, p2]); // [3, 42, 'foo']

// Rejection example.
const p0 = Promise.resolve(30);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('An error occurred!');
  }, 100);
});

try {
  await promiseAll([p0, p1]);
} catch (err) {
  console.log(err); // 'An error occurred!'
}

@danceswithcode
@alithecodeguy

#js #javascript #interview87

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

(اگر خودخوان باشید ، خودتون به راحتی میتونید یادبگیرید و نیاز به دوره ندارید)

عنوان دوره : Linux Essentials

هزینه دوره : ۲ میلیون تومان

زمان برگزاری :

جلسه اول : 3 بهمن 1404 ساعت 11 الی 13
جلسه دوم : 10 بهمن 1404 ساعت 11 الی 13
جلسه سوم : 17 بهمن 1404 ساعت 11 الی 13
جلسه چهارم : 24 بهمن 1404 ساعت 11 الی 13
جلسه تکمیلی : 1 اسفند 1404 ساعت 11 الی 13

منبع اصلی :
https://learning.lpi.org/pdfstore/LPI-Learning-Material-010-160-en.pdf

جلسه ۱ — معرفی لینوکس و مفاهیم پایه

هدف کلی: آشنایی با فلسفه و تاریخچه‌ی لینوکس، جامعه‌ی متن باز، و کاربردهای آن.

سرفصل‌ها:

مقدمه: لینوکس چیست؟ تاریخچه و دلیل پیدایش
مفاهیم Free & Open Source Software (FOSS)
کاربردهای لینوکس در دنیای امروز
آشنایی با توزیع‌های مهم لینوکس
تفاوت با دیگر سیستم‌عامل‌ها
نصب و راه‌اندازی یک توزیع ساده (مثلاً Ubuntu یا Fedora)

جلسه ۲ — کار با خط فرمان و مدیریت فایل‌ها

هدف کلی: تسلط به فرمان‌های پایه‌ی لینوکسی و مدیریت فایل‌ها.

سرفصل‌ها:

آشنایی با Shell و ترمینال
فرمان‌های پایه: ls, cd, pwd, cp, mv, rm, mkdir
مسیرهای نسبی و مطلق
کار با دایرکتوری‌ها و فایل‌ها
جستجو: grep, نمایش محتوا: cat, less
استفاده از کمک: man, --help

جلسه ۳ — ابزارهای خط فرمان پیشرفته و اسکریپت‌نویسی

هدف کلی: یادگیری ابزارهای قدرتمند مدیریت داده در خط فرمان و مقدمه‌ای بر اسکریپت‌نویسی.

سرفصل‌ها:

آرشیو و فشرده‌سازی: tar, gzip, zip
ورودی/خروجی و لوله‌ها (Pipes)
دستورات مفید: head, tail, sort, wc, cut
مفاهیم اولیه Bash Scripting
نوشتن اسکریپت‌های ساده (متغیر، حلقه، شرط)
اجرای اسکریپت‌ها و مجوزها

جلسه ۴ — مفاهیم سیستم، امنیت کاربرا و شبکه

هدف کلی: درک ساختار سیستم، مدیریت کاربران، امنیت پایه و ارتباط شبکه.

سرفصل‌ها:

معماری سیستم و درک بخش‌های مختلف لینوکس
مدیریت کاربران و گروه‌ها (useradd, groupadd)
مجوزهای فایل و دایرکتوری (chmod, chown)
شبکه‌ی ساده: IP, اتصال، ابزارهای Network
مرور کامل سرفصل‌ها
تمرین‌های ترکیبی و جمع‌بندی

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

در صورت علاقه به شرکت در دوره بهم پیام بدید. @alithecodeguy

دوره ضبط نمیشه.

هزینه این دوره در آنیسا : ۴.۵
مجتمع فنی : ۷.۵

🍁 لطفا این پست رو برای دوستای علاقه‌مندتون بفرستید 🍁

Javascript - Day 34

Promise.any

Note: If you haven't completed the Promise.all question, you should attempt that first.

" Promise.any() takes an iterable of elements (usually Promises). It returns a single promise that resolves as soon as any of the elements in the iterable fulfills, with the value of the fulfilled promise. If no promises in the iterable fulfill (if all of the given elements are rejected), then the returned promise is rejected with an AggregateError, a new subclass of Error that groups together individual errors. "

" If an empty iterable is passed, then the promise returned by this method is rejected synchronously. The rejected reason is an AggregateError object whose errors property is an empty array. "

Let's implement our own version of Promise.any(), a promiseAny function, with the difference being the function takes in an array instead of an iterable and AggregateErrors returned just have to return an array of error reasons, the message doesn't have to be set. Refer to the AggregateError constructor examples on MDN.

Be sure to read the description carefully and implement accordingly!

Examples

const p0 = Promise.resolve(42);
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(21);
  }, 100);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    resolve(42);
  }, 100);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 400);
});

await promiseAny([p0, p1]); // 42

const p0 = new Promise((resolve) => {
  setTimeout(() => {
    reject(42);
  }, 400);
});
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Err!');
  }, 100);
});

try {
  await promiseAny([p0, p1]);
} catch (err) {
  console.log(e instanceof AggregateError); // true
  console.log(e.errors); // [ 42, "Err!" ]
}

@danceswithcode
@alithecodeguy

#js #javascript #interview87

Javascript - 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 #javascript #interview87

Javascript + 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 #javascript #interview87

Javascript + 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 #javascript #interview87