با وجود ریکتی بودن خودم ، ولی قدرت همیشه توی سادگیه.

توی جلساتی که سال گذشته میذاشتیم ، این روز رو برای نکست پیش‌بینی کرده بودم (البته ریشش از ریکته) که زیر بار خودش دفن میشه. وقتی سرعت توسعش به جایی رسید که خیلی از برنامه‌نویسا صداشون درومد.

جدایی از بحث هک اخیر ، شما اگر فقط ریکت و نکست بلدی و نمیتونی با vanilla js اپ‌های وب رو توسعه بدی ، با ضعف بزرگی درگیری که شاید هنوز ندیدیش.

بخوام پیشنهاد بدم اینکه ، به حد کافی ریکت و ویو و ... بلدید. چندتا اپ pure تولید کنید.

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

تراکنشهای استرایپ توی بلک فرایدی هستش. این که چه قدره مهم نیست ، این که ما توش نیستیم مهمه.

بچه‌ای هستیم با توپ چهل تیکه که هیچ بچه‌ی دیگه‌ای حاضر نیست باهامون بازی کنه.

Javanoscript - Day 15

Debounce

Debouncing is a technique used to control how many times we allow a function to be executed over time. When a JavaScript function is debounced with a wait time of X milliseconds, it must wait until after X milliseconds have elapsed since the debounced function was last called.

You almost certainly have encountered debouncing in your daily lives before (e.g. when entering an elevator). Only after X duration of not pressing the "Door open" button (the debounced function not being called) will the elevator door actually close (the callback function is executed).

Implement a debounce function which accepts a callback function and a wait duration. Calling debounce() returns a function which has debounced invocations of the callback function following the behavior described above.

Examples

let i = 0;
function increment() {
  i++;
}
const debouncedIncrement = debounce(increment, 100);

// t = 0: Call debouncedIncrement().
debouncedIncrement(); // i = 0

// t = 50: i is still 0 because 100ms have not passed.

// t = 100: increment() was invoked and i is now 1.

debouncedIncrement() is called multiple times.

let i = 0;
function increment() {
  i++;
}
const debouncedIncrement = debounce(increment, 100);

// t = 0: Call debouncedIncrement().
debouncedIncrement(); // i = 0

// t = 50: i is still 0 because 100ms have not passed.
//  Call debouncedIncrement() again.
debouncedIncrement(); // i = 0

// t = 100: i is still 0 because it has only
//  been 50ms since the last debouncedIncrement() at t = 50.

// t = 150: Because 100ms have passed since
//  the last debouncedIncrement() at t = 50,
//  increment was invoked and i is now 1 .

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

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

به ترتیب اولویت:

1- React
2- TypeScript
3- JavaScript
4- Next.js
5- Node.js
6- GraphQL
7- Micro Frontend
8- BFF
9- Jest , React Testing Library , Playwright
10- Redux, Mobx
11- Performance, Security, & Accessibility
12- CI/CD
13- Git, GitLab, GitHub
14- Monorepo Setups & Tooling

اگر براتون عجیبه بعضی‌هاش چه ربطی داره ، باید بگم که بله. اکثرا دنبال فول استکن.

Javanoscript - Day 16

Promisify

Before promises/async/await became the standard, it was a convention for async APIs in JavaScript to accept callbacks as the last argument. Many async versions of Node.js APIs (e.g. fs.readFile and fs.rm) have such signatures. Node.js' util.promisify function was created to wrap around callback-based functions by returning Promises so that they can be used with async/await.

Implement a function promisify that takes a function following the common callback-last error-first style, i.e. taking a (err, value) => ... callback as the last argument, and returns a version that returns promises.

Examples

// Example function with callback as last argument
// The callback has the signature `(err, value) => any`
function foo(url, options, callback) {
  apiCall(url, options)
    .then((data) => callback(null, data))
    .catch((err) => callback(err));
}

const promisifiedFoo = promisify(foo);
const data = await promisifiedFoo('example.com', { foo: 1 });

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

دارم روی یک مقاله جامع برای webrtc کار میکنم که اینجا به اشتراک بذارم (شاید هم ویدیو کردم)

جز mdn و webrtc.org ، اگر رفرنس دیگه‌ای دارید که میتونه مفید باشه ، ممنون میشم بگید.

اینم آخر شبی ببینید فانه: 😁

https://youtube.com/shorts/W26aUa3ZBVA?si=i5-wPHcNoEaksW_r

Javanoscript - Day 17

Throttle

Throttling is a technique used to control how many times we allow a function to be executed over time. When a JavaScript function is said to be throttled with a wait time of X milliseconds, it can only be invoked at most once every X milliseconds. The callback is invoked immediately and cannot be invoked again for the rest of the wait duration.

Implement a throttle function which accepts a callback function and a wait duration. Calling throttle() returns a function which throttled invocations of the callback function following the behavior described above.

Examples

let i = 0;
function increment() {
  i++;
}
const throttledIncrement = throttle(increment, 100);

// t = 0: Call throttledIncrement(). i is now 1.
throttledIncrement(); // i = 1

// t = 50: Call throttledIncrement() again.
//  i is still 1 because 100ms have not passed.
throttledIncrement(); // i = 1

// t = 101: Call throttledIncrement() again. i is now 2.
//  i can be incremented because it has been more than 100ms
//  since the last throttledIncrement() call at t = 0.
throttledIncrement(); // i = 2

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

وب سایت سوممون هم اومد بالا :

https://www.chipinbro.com/

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

تا الان سه تا کار ساده آوردیم بالا با ۴ شعار اصلی :

۱- اگر از نسخه اول پروژه‌ات شرمنده نیستی ، دیر شروع کردی.
۲- اول بزا ، بعد بزرگش کن.
۳- ابزارها نباید نیاز به بک‌اند مستقل داشته باشن.
۴- تا حد ممکن همه چی رو ساده نگه دار.

سه تا پروژه اینها هستش و توی هر کدوم که بخواید به شکل اپن سورس می‌تونید مشارکت کنید. تیم دیزاینمون در حال ایجاد دیزاین‌های جدید و شکیله. نسخه‌های فعلی فقط نسخه 0.001 هستش.

payafterdone.com
menuliza.com
chipinbro.com

۲ ابزار دیگه هم در دست بررسیه.
یک در حوزه سلامت ، یکی هم در حوزه تماس تصویری و چت

همه اینها زیر مجموعه چیزیه به نام NoAiStudio

یکی از شرکت کننده‌های عشق ابدی ، با ۳ هفته حضور در برنامه که میشه یه چیزی حدود ۵ روز یا نهایتا ۱۰ روز حضور در ویلا ، ۳۲ هزار نفر فالوور فقط روی تلگرام گرفته. اینستا و یوتیوب به کنار.

من ۵ ساله فعالیت تخصصی میکنم ، هنوز ۸۰۰ تا نشدیم (به غیر از اون ۲۵۰۰ عزیز از دست رفته)

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

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

Javanoscript + React - Day 18

useArray

Implement a useArray hook that manages an array of items with additional utility methods.

It is more convenient to use useArray over plain useState because in the latter case, you would always have to create a new array, mutate it, then set state to use the new array, which can be quite cumbersome.

The hook should work generically with arrays of any types.

const defaultValue = ['apple', 'banana'];

export default function Component() {
  const { array, push, update, remove, filter, set, clear } = useArray();

  return (
    <div>
      <p>Fruits: {array.join(', ')}</p>
      <button onClick={() => push('orange')}>Add orange</button>
      <button onClick={() => update(1, 'grape')}>
        Change second item to grape
      </button>
      <button onClick={() => remove(0)}>Remove first</button>
      <button onClick={() => filter((fruit) => fruit.includes('a'))}>
        Keep fruits containing 'a'
      </button>
      <button onClick={() => set(defaultValue)}>Reset</button>
      <button onClick={clear}>Clear list</button>
    </div>
  );
}

Arguments

- defaultValue: The initial array of items

Returns

The hook returns an object with the following properties:

- array: The current array of items
- set: (newArray) => void: A function that sets the array of items. This must be the same type as the setter function of useState
- push: (item) => void: A function that adds an item to the end of the array
- remove: (index: number) => void: A function that removes an item from the array by index
- filter: (predicate) => void: A function that filters the array based on a predicate function. predicate must be the same type as the argument of Array.prototype.filter
- update: (index: number, newItem) => void: A function that replaces an item in the array at index
- clear: () => void: A function that clears the array

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

به مدت ۲.۵ ماه توی کانال فعال نخواهم بود. (تا اواسط اسفند)

پیامهای سوالات ۸۷ روزه جاوااسکریپت ، تنظیم شده که اتوماتیک طبق برنامه پست بشه توی کانال.

ایشالله بعدش با خبر خوب برای خودم و اگر قسمت بشه با خبر خوب برای بقیه میام.

ترکم نکنید 😘

Javanoscript + React - Day 19

useDebounce

Implement a useDebounce hook that delays state updates until a specified delay has passed without any further changes to the provided value.

export default function Component() {
  const [keyword, setKeyword] = useState('');
  const debouncedKeyword = useDebounce(keyword, 1000);

  return (
    <div>
      <input value={keyword} onChange={(e) => setKeyword(e.target.value)} />
      <p>Debounced keyword: {debouncedKeyword}</p>
    </div>
  );
}

The observable outcome of using useDebounce is quite similar to React's useDeferredValue, the former returns an updated value after a fixed duration while the latter always returns the updated value but updates to the DOM relies on React's priority system.

Arguments

1. value: The value to debounce
2. delay: number: The delay in milliseconds

Returns

The hook returns the debounced value.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 20

useSet

Implement a useSet hook that manages a JavaScript Set of items with additional utility methods.

It is more convenient to use useSet over plain useState because in the latter case, you would always have to create a new Set, mutate it, then set state to use the new set, which can be quite cumbersome.

The hook should work generically with items of any types.

export default function Component() {
  const { set, add, remove, toggle, reset, clear } = useSet(new Set(['hello']));

  return (
    <div>
      <button onClick={() => add(Date.now().toString())}>Add</button>
      <button onClick={() => remove('hello')} disabled={!has('hello')}>
        Remove 'hello'
      </button>
      <button onClick={() => toggle('hello')}>Toggle hello</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => clear()}>Clear</button>
      <pre>{JSON.stringify(Array.from(set), null, 2)}</pre>
    </div>
  );
}

Arguments

- initialState: The initial Set of items

Returns

The hook returns an object with the following properties:

- set: The current set of items
- add: (item) => void: A function that adds item to the set
- remove: (item) => void: A function that removes item from the set
- toggle: (item) => void: A function that toggles the presence of item in the set
- reset: () => void: A function that resets the set to initialState
- clear: () => void: A function that removes all items in the set

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 21

useTimeout

Implement a useTimeout hook that invokes a callback function after a specified delay.

Note that the hooks can be called again with different values since the initial call:

- Different callback: The pending timer should invoke the latest callback. If the timer has already expired, the callback is not executed and no new timer will be set
- Different delay: The previous timeout should be cancelled if the timer hasn't expired, a new timer is set with the new delay value

The primary benefit of useTimeout is so that you don't have to manually clear call clearTimeout() if the component unmounts before the timer expires.

export default function Component() {
  const [loading, setLoading] = useState(true);

  useTimeout(() => setLoading(false), 1000);

  return (
    <div>
      <p>{loading ? 'Loading' : 'Ready'}</p>
    </div>
  );
}

Arguments

1. callback: () => void: A function to be called after the specified delay
2. delay: number | null: The delay in milliseconds before the invocation of the callback function. If null, the timeout is cleared

Returns

Nothing.

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87

Javanoscript + React - Day 22

useWindowSize

Implement a useWindowSize hook that returns the current height and width of the window (window.innerHeight and window.innerWidth). It should re-render the component if the screen properties changes.

export default function Component() {
  const screen = useWindowSize();

  return (
    <div>
      <p>The current window dimensions are:</p>
      <code>{JSON.stringify(screen, null, 2)}</code>
    </div>
  );
}

Arguments

Nothing.

Returns

The hook returns an object with the following properties:

- height: number: Current height of the screen
- width: number: Current width of the screen

@danceswithcode
@alithecodeguy

#js #javanoscript #interview87