این چند روزه توی لاگین با گوگل (توی اپلیکیشن‌ها) به مشکل میخورم و این محدود به اینترنت ایران نیست. شما هم تجربش کردید؟
تقریبا سکته‌ای کار میکنه

قابلیت Intersection Observer API چیست؟

قابلیت Intersection Observer API یک قابلیت داخلی مرورگر هست که به شما این امکان رو میده تا به‌صورت غیرهمزمان (Async) بفهمید که یه عنصر (Element) کی وارد دید کاربر (Viewport) میشه یا از دید خارج میشه.

🔍 به زبون ساده یعنی:

این API کمک می‌کنه متوجه بشید که یه بخش از صفحه واقعاً داره توسط کاربر دیده میشه یا نه.

📌 چه کاربردهایی داره؟
✅ بارگذاری تنبل (Lazy Loading) تصاویر — فقط وقتی که تصویر به دید کاربر نزدیک شد، لود بشه.
✅ اجرای انیمیشن‌ها وقتی عنصر وارد دید شد (مثل Fade In)
✅ پیاده‌سازی اسکرول بی‌نهایت (Infinite Scroll) — وقتی کاربر به انتهای صفحه رسید داده‌های جدید لود بشه.
✅ بررسی دیده‌شدن تبلیغات (Ad Viewability)

🏗 چطوری کار می‌کنه؟

شما میاید یه IntersectionObserver می‌سازید، بهش می‌گید کدوم عنصرها رو بررسی کنه، و یه تابع کالبک (Callback Function) بهش می‌دید.
هر وقت اون عنصر با توجه به تنظیمات (Threshold) وارد دید شد یا از دید خارج شد، اون تابع اجرا میشه.

⚡ چرا بهتر از رویداد Scroll هست؟

اگه از رویداد scroll استفاده کنید، باید مدام وضعیت عنصر رو با getBoundingClientRect چک کنید.
این کار هم پرهزینه‌ست و هم می‌تونه باعث کند شدن مرورگر بشه.
ولی Intersection Observer کاملاً بهینه‌سازی شده و توسط خود مرورگر مدیریت میشه.
پس خیلی سریع‌تر و سبک‌تره.

✍️ یه مثال خیلی ساده

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('🎯 عنصر وارد دید شد!');
      observer.unobserve(entry.target); // دیگه نیازی به بررسی دوباره نیست
    }
  });
}, {
  root: null,     // یعنی نسبت به ویوپورت مرورگر
  threshold: ۰.۱  // یعنی وقتی ده درصد عنصر دیده شد، تابع اجرا بشه
});

const target = document.querySelector('#myElement');
observer.observe(target);

اشتراک تجربه:

نظرهای متفاوتی در مورد نحوه یادگیری هستش که میشه به سه دسته کلی تقسیمش کرد:

۱. فقط یک موضوع رو یاد بگیریم و خیلی توش متخصص بشیم.

۲. روی یک موضوع عمیق بشیم ولی از بقیه چیزها هم یه کمی بدونیم (مدلT)

۳. از موضوعات مختلف مربوط به حوزه خودمون به یک اندازه بدونیم.

اینکه چه کاری دارید انجام می‌دید و چه آینده‌ای برای خودتون ترسیم کردید ، میتونه توی انتخاب هر یک از این سه گزینه نقش داشته باشه.

نظر خودم معمولا گزینه ۲ بود ولی با ورود هوش مصنوعی و نوآوری که توی فرآیند تولید نرم‌افزار رخ داد ، خیلی‌ها نظرشون به گزینه ۳ تغییر کرد.

اما یک اتفاق عجیب رخ داد!

هوش مصنوعی ، خیلی خیلی زود روی تاریک خودش رو نشون داد.

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

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

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

همیشه دوره خوب معرفی کردم. یه بار هم دوره بد معرفی کنم.

پیشنهاد میکنم سراغ این دوره نرید:

Udemy - JavaScript Complete Grandmaster Course 2025 2025-4

بالخره باگ پیش میاد.

سعی کنید محصولتون اول بالا بیاد ، بعد چکش کاریش کنید.

اگر NextJs بلد هستید بیاید کل کل کنیم 😁️️️️

به نظرتون چرا توی داکیومنت نکست ، برای نحوه prefetch شدن لینک‌ها ، دوتا حرف متفاوت زده؟

زیباترین ویدیویی که با هوش مصنوعی تولید شده

از پیامهایی که دوستان میدن و پست‌هایی که توی لینکدین میبینم ، میتونم حجم استرس تعدیلی‌ها و اخراجی‌ها رو درک کنم.

ولی طبق تجربه من :

۰- این موضوع فقط برای ایران نیست. تقریبا همه شرکت‌ها توی همه کشورها راه تعدیل رو پیش گرفتن. فقط بهانه‌ها متفاوته.

۱- بازار آیتی هر ۵ سال یکبار یک شوک جدید بهش وارد میشه بعدش درست میشه.

۲- اگر درآمد ثانویه نداشتید ، الان زمان خوبیه که بهش فکر کنید.

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

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

۵- توی شرایط فعلی به هر شکلی که می‌تونید به قول خارجی‌ها survive کنید ولی بهترین فرصت خودشناسی هستش. تا چند سال دیگه این فرصت رو پیدا نمی‌کنید.

پروتکل gRPC یه راه برای اینه که دو تا برنامه (مثلاً دو تا سرور، یا یه موبایل و یه سرور) بتونن با هم حرف بزنن و داده رد و بدل کنن.

باهاش می‌تونی خیلی راحت بگی:
«هی سرور! این تابع رو با این ورودی اجرا کن و نتیجه رو برگردون.»

خیلی شبیه به REST یا API های HTTP هست، ولی:

- سریع‌تره (چون از HTTP/2 و باینری استفاده می‌کنه)
- کم‌حجم‌تره (به جای JSON از protobuf استفاده می‌کنه)
- قراردادی‌تره (یه فایل proto می‌نویسی که مشخص می‌کنه درخواست و پاسخ چه شکلیه)

مزایای gRPC:

سریع
کم‌حجم
چندزبانه (جاوا، پایتون، Go، جاوااسکریپت و … می‌فهمنش)
خیلی خوب برای میکروسرویس‌ها

معایب gRPC:

عدم پشتیبانی مستقیم توسط مرورگرها
دیباگ و لاگ‌گیری سخت‌تر
نسبتاً جدید و ناشناخته‌تر
نیاز به ساختن فایل proto و generate کردن کد

مثال با nodejs:

helloworld.proto
‍‍‍

syntax = "proto3";

package helloworld;

// The greeting service definition.
service Greeter {
  // Sends a greeting
  rpc SayHello (HelloRequest) returns (HelloReply) {}
}

// The request message containing the user's name.
message HelloRequest {
  string name = 1;
}

// The response message containing the greetings
message HelloReply {
  string message = 1;
}

npm init -y
npm install @grpc/grpc-js @grpc/proto-loader

server.js

import grpc from '@grpc/grpc-js';
import protoLoader from '@grpc/proto-loader';

// Load proto file
const packageDefinition = protoLoader.loadSync('helloworld.proto', {});
const proto = grpc.loadPackageDefinition(packageDefinition).helloworld;

// Implement the SayHello RPC
function sayHello(call, callback) {
  console.log('Received request for:', call.request.name);
  callback(null, { message: `Hello, ${call.request.name}!` });
}

// Start the gRPC server
const server = new grpc.Server();
server.addService(proto.Greeter.service, { SayHello: sayHello });
server.bindAsync('0.0.0.0:50051', grpc.ServerCredentials.createInsecure(), () => {
  console.log('Server running at http://0.0.0.0:50051');
  server.start();
});

client.js

import grpc from '@grpc/grpc-js';
import protoLoader from '@grpc/proto-loader';

// Load proto file
const packageDefinition = protoLoader.loadSync('helloworld.proto', {});
const proto = grpc.loadPackageDefinition(packageDefinition).helloworld;

// Create client
const client = new proto.Greeter('localhost:50051', grpc.credentials.createInsecure());

// Make request
client.SayHello({ name: 'Ali' }, (err, response) => {
  if (err) {
    console.error(err);
    return;
  }
  console.log('Greeting:', response.message);
});

Run it!
node server.js
node client.js

Server running at http://0.0.0.0:50051
Received request for: Ali

Greeting: Hello, Ali!

#grpc #nodejs

@danceswithcode

چالش:

می‌دونیم که اپ‌های PWA همیشه از صفحه اول باز می‌شن. ولی گاهی ممکنه که نیاز داشته باشیم که یک لینک‌داخلی‌تر رو مستقیم باز کنیم. مثلا به جای این آدرس:
/
بخواهیم این آدرس رو مستقیم باز کنیم.
/posts/warzone

ولی به صورت پیش فرض همیشه از / باز بشه.

چه راهی بلدید براش؟

یکی از راه‌هاش Deeplink هستش

@danceswithcode

این بده.

یکی از معروف‌ترین نقل‌قول‌های برتراند راسل (Bertrand Russell):

«به احساسات خود احترام بگذارید، اما هرگز اجازه ندهید که آنها استدلال‌هایتان را فاسد کنند.»
(Respect your own feelings, but never let them corrupt your reasoning.

به عبارت دیگر ، نذارید احساسی که نسبت به موضوعی دارید ، روی تصمیم‌گیری‌های شما در مورد اون موضوع اثر بذاره.

در مورد دین ، اقتصاد ، روابط زناشویی ، قضاوت و هر چیز دیگه‌ای صدق میکنه.

سوالات مصاحبه‌ای آپدیت شد.

این یک نکته خاص از ریکت هستش که توی مصاحبه‌ها پرسیده شده ازم:

https://youtube.com/shorts/CAEuTN4qYqI?si=6bo_D8rp8YtYxu_x

#interview

یه ابزار جالب برای بررسی پرفورمنس صفحات وب

برخلاف لایت هاوس ، تک به تک صفحات رو بررسی میکنه و نتیجه‌ای که میده واضح‌تره

https://next.unlighthouse.dev/

دیروز متوجه شدم ، فنی‌حرفه‌ای در مقطع کاردانی ، رشته فرانت‌اند داره!
جالبه واقعا

تازه تازه ADHD و OCDC داشت افتخارشو از دست می‌داد که مزخرف جدید اضافه شد.

برای هر مشکلی که دیگه نباید اسم گذاشت. اسم هم داشته باشه که نباید جار بزنید.
بیماری HIV یا هپاتیت هم داشتید میومدید با افتخار اعلام کنید؟

منم یه مریضی دارم FOBC

Fear of Barbary closed

یعنی وقتی میرم نونوایی بربری میبینم بسته‌اس.