بزرگترین red flag یک آگهی شغلی:

"همکاری با تیمی از دانش‌آموختگان دانشگاه صنعتی شریف و سایر دانشگاه‌های معتبر، با تمرکز جدی بر یادگیری و رشد تخصصی."

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

نمیشه گفت درسته یا نه ولی حرفاش دور از منطق نیست. درست یا غلط بودنش با خودتون.

https://www.youtube.com/watch?v=E7zI0gLoLwA

نکست ورژن ۱۵.۴ منتشر شد.

عمیقا احساس می‌کنم ، بک‌اند به مراتب راحت‌تره. حداقل توی حال حاضر.

۲۰ تا سوال زیر رو سعی کنید بدون هوش مصنوعی و کمک و فقط با فکر کردن ، به روش recursive حل کنید

🟢 Easy

1. Write a recursive function to calculate the sum of numbers from 1 to n.

2. Write a recursive function to compute the factorial of n.

3. Write a recursive function to print each element of an array.

4. Write a recursive function to count down from n to 1.

5. Write a recursive function to reverse a string.

6. Write a recursive function that returns the length of a string (without using .length).

7. Write a recursive function to check if a number is even.

8. Write a recursive function that prints numbers from 1 up to n.

9. Write a recursive function to count the number of vowels in a string.

10 .Write a recursive function to calculate the power base^exponent.

🟡 Medium

11. Write a recursive function to compute the nth Fibonacci number.

12. Write a recursive function to check if a string is a palindrome.

13. Write a recursive function to sum all elements in a nested array (deep sum).

14. Write a recursive function to flatten a nested array into a single array.

15. Write a recursive function to find the maximum number in an array.

16. Write a recursive function that capitalizes the first letter of each word in an array of strings.

17. Write a recursive function to multiply all numbers in an array.

18. Write a recursive function that removes all occurrences of a given character from a string.

19. Write a recursive function to find the GCD (greatest common divisor) of two numbers.

20. Write a recursive function to merge two sorted arrays into one sorted array (without using loops).

@alithecodeguy #recursive #interview

پشت پرده آفرهای لینکدینی

توی ویکی‌تجربه نشون میده کی چندتا کامنت گذاشته و چیا گذاشته.

یه بنده خدایی روز ۲۹ اسفند ۱۴۰۳ از کلی شرکت بد گفته . حداقل ۲۹ صفحه پیجینیشن رو من دیدم.

این صفحه رو ببینید. به نظرتون منطقیه؟

https://tajrobe.wiki/user/YDne?page=1

مدتیه دارم روی یک ایده کار میکنم و خدا بخواد تا چند ماه دیگه لانچش میکنم.

این که چیه و چه جوری داره زده میشه مهم نیست.

فقط میدونم که بعد از لانچ شدن قطعا به کمک چند نفر نیاز دارم.

اگر دوست داشتید که یه روزی با هم کار کنیم ، از الان تا ۵،۶ ماه دیگه روی PWA ، i18n ، داکر ، NextJs 15 و tailwind و shadcn تسلط بسیار زیاد پیدا کنید و فقط یک نمونه کار خیلی قوی رو پیش ببرید.

پاروقی ۱ : احتمالا نشدنش هم هست و اگر قسمت نشه با هم کار کنیم ، حداقل اینکه شما رزومه قوی‌ای برای خودتون ساختید

پاورقی ۲: لطفا از الان هیچ رزومه‌ یا پیامی در این خصوص نفرستید 🙏

پاورقی ۳: از اشتباهات پروژه قبلی درس‌های جالبی گرفتم که سعی دارم این سری اتفاق نیفته.

الان که دارم پیام میذارم اینجا برق رفته و شارژ گوشیمم داره تموم میشه و پاوربانکمم خراب شد 🫠 این چند روز خیلی برق میره.

رفتم لینکدین دیدم یکی نوشته از صبح ۵ بار برقمون رفت دوبار آبمون 😶

ولی آیا الان توی این ثانیه کاری از دستم برمیاد؟ آیا غر زدن فایده‌ای داره؟ نمیگم به وضعیت موجود نباید اعتراض کرد ولی دارم همین لحظه رو میگم. قطعا نه.

خیلی راحت دایورت کردم و ترجیح دادم تا نور روز هست بشینم کتاب بخونم.

نمیدونم چی میخواد بشه ولی هر چی میشه زمان سوخت نکنید.

پاورقی: چه اسم مرتبطی داره با وضع فعلی کشور.

مدرن‌ترین روش اضافه کردن قابلیت PWA

عالیه 😁

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

Udemy - NEW Figma 2024 Getting started the Beginner to Pro Class 2025-5

روی دانلودلی هستش

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

چند دلیل عمده داره:

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

۲- فرقی نداره مدرس خارجی باشه یا ایرانی. وقتی میخواد دوره‌ای رو ضبط کنه ، محبوره بخشی از مفاهیم رو حذف کنه ولی متاسفانه ایرانی‌ها خیلی بیشتر حذف می‌کنن.

۳- سعی کنید بیشتر داکیومنت بخونید ولی برای یه چیزی مثل فیگا داکیومنت خوندن کمی بی‌معناست.

۴- ایرانی‌ها دیر‌به‌دیر ویدیو میسازن و این باعث میشه دوره‌شون خیلی بروز نباشه. دوره خوب ساختن خیلی کار سختیه و طرف اگر زیر ۴۰۰،۵۰۰ میلیون درنیاره به نظرم منطقی نیست براش.

بعد از ساعت ۶ عصر ، هیچ اتفاق مثبتی توی شرکت نمیفته. برو خونه دوست من.

این متن رو از روی قسمت ninja code سایت javanoscriptinfo حدود ۴ سال پیش نوشتم البته کاملا بومی سازی شده و میشه گفت تا ۵۰ درصد و بیشتر با متن اصلی فرق داره.

پیشنهاد میکنم بخونید.

چطوری یک برنامه‌نویس مزخرف باشیم؟

https://github.com/alithecodeguy/persian-javanoscript.info/blob/master/0026%20ninja%20code.pdf

اینم جالب بود

📜 قابلیت Web Worker در مرورگر چیست و چرا باید از آن استفاده کنیم؟

قابلیت Web Worker به شما اجازه می‌دهد که کدهای JavaScript را در یک thread جداگانه اجرا کنید، مستقل از thread اصلی مرورگر. این یعنی می‌توانید عملیات‌های سنگین را بدون تأثیر روی UI انجام دهید و رابط کاربری روان باقی بماند.

🔰 مزایای استفاده از Web Worker

• جلوگیری از هنگ کردن رابط کاربری در زمان انجام محاسبات سنگین
• اجرای عملیات پردازشی سنگین خارج از thread اصلی
• افزایش کارایی در اپلیکیشن‌هایی مانند:
- پردازش تصویر یا ویدیو
- تجزیه فایل‌های JSON حجیم
- مرتب‌سازی یا فیلتر داده‌ها
- انجام محاسبات بلادرنگ (Real-time)
- سینک شدن اطلاعات در پس‌زمینه

🌀 انواع Web Worker

1️⃣ نوع Dedicated Worker: مخصوص یک صفحه یا اسکریپت خاص است و فقط همان صفحه می‌تواند با آن ارتباط داشته باشد. مناسب برای پردازش تصویر و عملیات سنگین تک‌صفحه‌ای است.

- این نوع Worker برای اجرای عملیات پردازشی سنگین که نباید رابط کاربری (UI) را مختل کند، بسیار مناسب است.

- مثل یک نخ (thread) مجزاست که در پس‌زمینه اجرا می‌شود و از طریق ارسال و دریافت پیام با thread اصلی در ارتباط است.

ویژگی‌های اصلی Dedicated Worker

- فقط توسط اسکریپتی که آن را ساخته قابل دسترسی است
- در background اجرا می‌شود
- به DOM دسترسی ندارد
- با postMessage و onmessage داده رد و بدل می‌کند
- می‌توان از importScripts() برای بارگذاری اسکریپت‌های دیگر درون آن استفاده کرد
- هنگام اتمام کار می‌توان با terminate() آن را متوقف کرد
- باید از مسیر مجزا (URL) بارگذاری شود؛ نمی‌توان inline نوشت مگر با Blob
- می‌توان چند Worker همزمان ساخت
- می‌توان از structuredClone برای ارسال داده‌های پیچیده استفاده کرد

کاربردهای متداول Dedicated Worker

- پردازش سنگین ریاضی (محاسبه، شبیه‌سازی، الگوریتم‌ها)
- فیلتر کردن داده‌ها (مثلاً لیست‌های بزرگ)
- رمزنگاری یا هش کردن
- پردازش تصویر (فیلتر، بلور، resize)
- پارس کردن JSON یا فایل‌های بزرگ

‍main.js

const worker = new Worker("worker.js");

worker.postMessage("Hello Worker!");

worker.onmessage = function (e) {
  console.log("Received from worker:", e.data);
};

worker.js

onmessage = function (e) {
  console.log("Received from main:", e.data);
  postMessage("Hi Main!");
};

2️⃣ نوع Shared Worker: چندین صفحه یا تب می‌توانند به یک Shared Worker دسترسی داشته باشند. مناسب برای چت‌های همزمان بین چند تب یا مدیریت داده‌های مشترک است.

می‌تونه بین چند تب، iframe یا حتی چند اسکریپت در یک صفحه مشترک استفاده بشه.

برخلاف Dedicated Worker که فقط یک ارتباط بین یک صفحه و یک Worker برقرار می‌کنه، Shared Worker می‌تونه بین چند بخش مختلف از برنامه ارتباط مشترک ایجاد کنه.

ویژگی‌های اصلی Shared Worker

- قابلیت اشتراک‌گذاری بین چند تب یا iframe
- مدیریت داده‌ی مشترک بین چند بخش از یک یا چند صفحه
- ارتباط از طریق پورت (port) انجام می‌شه
- فقط یک نمونه در مرورگر ساخته می‌شه و همه‌ی تب‌ها از همون استفاده می‌کنن
- به DOM دسترسی نداره
- به‌درد اپلیکیشن‌های real-time یا multi-tab خیلی می‌خوره
- می‌تونی آرایه‌ای از portها رو درون Worker نگه داری و پیام‌ها رو به همه broadcast کنی
- از BroadcastChannel API هم می‌شه به‌صورت ترکیبی استفاده کرد
- فقط اولین بار که تب باز می‌شه Worker جدید ساخته می‌شه، بقیه تب‌ها به همون متصل می‌شن
- در برخی نسخه‌های قدیمی Safari و IE پشتیبانی نمی‌شه
ارتباط کمی پیچیده‌تر از Dedicated Worker داره چون از port استفاده می‌کنه
- باید حواست باشه که Worker ممکنه از قبل در حال اجرا باشه (shared lifecycle)

کاربردهای واقعی Shared Worker

- چت real-time بین تب‌ها
- هماهنگ‌سازی لاگین یا لاگ‌اوت بین تب‌ها
- نگهداری وضعیت session به‌صورت مرکزی
- اشتراک‌گذاری connection به WebSocket بین تب‌ها (صرفه‌جویی در منابع)
- اعمال throttle یا debouncing روی درخواست‌های همزمان از چند تب

shared-worker.js

onconnect = function (e) {
  const port = e.ports[0];
  port.onmessage = function (e) {
    port.postMessage("Shared: " + e.data);
  };
};

main.js

const worker = new SharedWorker("shared-worker.js");
worker.port.start();
worker.port.postMessage("Hi Shared Worker");

worker.port.onmessage = (e) => {
  console.log(e.data);
};

#worker @danceswithcode

ادامه در پست بعد

3️⃣ نوع Service Worker: مثل یک پروکسی بین مرورگر و شبکه عمل می‌کند. کاربرد آن بیشتر در PWAها، کش کردن منابع، و پشتیبانی از حالت آفلاین است.

ویژگی‌های کلیدی Service Worker

- در پس‌زمینه اجرا می‌شود
- مستقل از تب‌ها و صفحات است
- فقط از طریق HTTPS یا localhost کار می‌کند
- رویدادمحور (event-driven) است
- به DOM دسترسی ندارد
- می‌تواند حتی وقتی تب بسته است هم کار کند (مثلاً Push Notification)

Lifecycle (چرخه‌ی عمر)

۱. Install
برای اولین بار که Service Worker ثبت می‌شود، فایل آن نصب می‌شود. در این مرحله می‌توان منابع لازم را cache کرد.

۲. Activate
بعد از نصب موفق، فعال می‌شود. این مرحله برای پاک‌سازی cacheهای قدیمی هم کاربرد دارد.

۳. Fetch
هر بار که مرورگر درخواستی (مثلاً fetch یا load) ارسال می‌کند، Service Worker آن را رهگیری می‌کند و می‌تواند پاسخ را از cache یا شبکه بدهد.

استراتژی‌های caching مهم

۱. Cache First: اول از cache بخون، اگر نبود برو سراغ شبکه
۲. Network First: اول از شبکه بیار، اگر قطع بود از cache استفاده کن
۳. Stale-While-Revalidate: از cache نشون بده، در پس‌زمینه یک نسخه جدید بگیر
۴. Cache Only: فقط از cache استفاده کن
۵. Network Only: فقط از شبکه استفاده کن

معرفی ابزار حرفه‌ای: Workbox

ابزار Workbox کتابخانه‌ای از گوگل هست که ساخت و مدیریت Service Workerها را خیلی راحت‌تر و حرفه‌ای‌تر می‌کنه.

مزایا:
- سادگی استفاده
- پشتیبانی از استراتژی‌های caching مختلف
- تولید اتوماتیک فایل cache در زمان build
- عالی برای پروژه‌های React، Vue، Next.js و …

قابلیت‌های ویژه Service Worker

- Push Notification
دریافت پیام از سرور حتی وقتی تب بسته‌ست
- Background Sync
ارسال داده به سرور زمانی که اینترنت وصل می‌شود
- App Shell Model
مناسب برای PWAها؛ صفحات سریع و آفلاین
- Offline fallback
وقتی اینترنت قطع بود، صفحه‌ای مخصوص نشون بده

محدودیت‌ها و نکات امنیتی

- فقط در HTTPS یا localhost کار می‌کند
- به DOM دسترسی ندارد
- باید در root domain ثبت شود (مثلاً /sw.js نه /pages/sw.js)
- نسخه‌های قدیمی باید مدیریت شوند و cacheها پاک شوند
- زمان‌بندی دقیقی برای اجرای آن نیست (مرورگر تصمیم می‌گیرد)

کاربردهای واقعی Service Worker

- ساخت اپلیکیشن آفلاین (مانند Google Docs)
- ارسال اعلان بدون باز بودن تب
- کاهش مصرف داده با cache هوشمند
- نمایش fallback page هنگام قطعی اینترنت
- پشتیبانی از background sync برای فرم‌های آفلاین

⸻

Register it:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(() => console.log("SW Registered"));
}

sw.js

self.addEventListener('install', (event) => {
  console.log("Service Worker installing.");
});

self.addEventListener('fetch', (event) => {
  console.log("Intercepting fetch:", event.request.url);
});

#worker @danceswithcode

ادامه در پست بعد

4️⃣ نوع Module Worker: نوع جدیدی از Web Worker است که با type: "module" ساخته می‌شود و اجازه می‌دهد از import/export استفاده کنی. برای برنامه‌نویسی ماژولار در Web Worker بسیار مفید است.

- امکان استفاده از import/export در Worker
- سازگاری با معماری ماژولار (modular) و قابل نگهداری
- بدون نیاز به importScripts (که مخصوص اسکریپت‌های کلاسیکه)
- قابل استفاده در پروژه‌های مدرن با ابزارهایی مثل Vite، Webpack، Rollup و ESBuild
- پشتیبانی کامل در مرورگرهای مدرن (Chrome, Edge, Firefox, Safari)

math-worker.js

mport { heavySum } from './utils.js';

self.onmessage = (event) => {
  const n = event.data;
  const result = heavySum(n);
  self.postMessage(result);
};

utils.js

export function heavySum(n) {
  let sum = 0;
  for (let i = 1; i <= n; i++) {
    sum += i;
  }
  return sum;
}

main.js

const worker = new Worker('./math-worker.js', { type: 'module' });

worker.postMessage(1000000);

worker.onmessage = (e) => {
  console.log("✅ پاسخ از Module Worker:", e.data);
};

توجه: اگر type: "module" رو ننویسی، مرورگر فایل رو به‌صورت classic noscript تفسیر می‌کنه و استفاده از import/export باعث ارور syntax می‌شه.

- مسیر فایل باید نسبی یا مطلق صحیح باشه (./worker.js یا /js/worker.js)
- فایل‌ها باید از روی سرور (یا localhost) اجرا بشن — اجرا از فایل سیستمی (file://) معمولا خطا می‌ده
- اگر از ابزارهایی مثل Webpack یا Vite استفاده می‌کنی، باید loader مخصوص Web Worker یا plugin استفاده کنی
- نمی‌تونی از CDN (مثل unpkg) مستقیم توی Worker import کنی مگر اینکه CORS اجازه بده

const worker = new Worker("module-worker.js", { type: "module" });

module-worker.js

import { helper } from './helper.js';
onmessage = e => {
  postMessage(helper(e.data));
};

5️⃣ نوع Worklet: اسکریپت‌های بسیار سبک و کوچک که برای کارهایی مثل افکت‌های بصری (CSS Houdini) یا پردازش صدا (Web Audio API) به کار می‌روند. سریع و کم‌هزینه هستند ولی محدودتر از سایر Workerها.
مثل:
- 🎨 ‌CSS Houdini (Paint Worklet)
- 🔊 Web Audio API (Audio Worklet)
- 📐 Layout Worklet (درحال توسعه)

- نه thread جداگانه داره و نه access به اغلب APIهای معمول مرورگر
- در محیطی ultra-sandboxed اجرا می‌شه
- حتی خیلی از APIهای پایه (مثل fetch, setTimeout, console.log) هم در اون‌ها وجود نداره

مثال: Paint Worklet (CSS Houdini)

paint.js

registerPaint('circle', class {
  paint(ctx, geom, properties) {
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(geom.width / 2, geom.height / 2, 40, 0, 2 * Math.PI);
    ctx.fill();
  }
});

Register in main.js:

if ('paintWorklet' in CSS) {
  CSS.paintWorklet.addModule('paint.js');
}

css

.my-box {
  width: 100px;
  height: 100px;
  background: paint(circle);
}

مرورگر در لحظه‌ی رندر paint(circle)، تابع paint() رو از فایل paint.js اجرا می‌کنه.

مثال: Audio Worklet

processor.js

class WhiteNoiseProcessor extends AudioWorkletProcessor {
  process(inputs, outputs, parameters) {
    const output = outputs[0];
    output.forEach(channel => {
      for (let i = 0; i < channel.length; i++) {
        channel[i] = Math.random() * 2 - 1;
      }
    });
    return true;
  }
}

registerProcessor('white-noise', WhiteNoiseProcessor);

main.js

const audioContext = new AudioContext();
await audioContext.audioWorklet.addModule('processor.js');
const node = new AudioWorkletNode(audioContext, 'white-noise');
node.connect(audioContext.destination);

این کد یک نویز سفید تولید می‌کنه که مستقیماً به اسپیکر وصل می‌شه.

#worker @danceswithcode

این مطلب در قالب سه پست ، تکمیل شد

☝️☝️☝️
۳ تا پست بالا رو از دست ندید. صفر تا صد web workerها رو یاد میگیرید. پیش نیاز چیزهایی مثل PWA هستش و علاوه بر اون توی مصاحبه‌ها گاها سوال می‌پرسن ازش
☝️☝️☝️