پیج اینستا

https://www.instagram.com/shabtab_team


کانال یوتیوب

https://youtube.com/@shabtab-team


کانال برنامه نویسی شب تاب

https://t.me/init_code



کانال کوییز

https://t.me/ShabtabQuiz



سایر کانال ها بزودی جوین شید و لینک رو به اشتراک بزارید

🚀 فرانت‌اند و جاوااسکریپت؛ ۵ تا چیزی که باید بلد باشی:

۱. DOM بازی با دست یا کتابخونه
document.querySelector() رو بلد باش، ولی بدون که React قراره جاش رو بگیره.

۲. Event Loop (همون ترتیب عجیب اجرا)

setTimeout(() => console.log('دیره'), 0);
Promise.resolve().then(() => console.log('زودتر'));
// خروجی: زودتر → دیره
۳. Async/Await برای گرفتن دیتا
با fetch راحت درخواست بزن و خطاها رو با try/catch بگیر.

۴. ۳ تا متد طلایی آرایه‌ها
map() برای تبدیل، filter() برای غربال، reduce() برای جمع‌بندی (جایگزین حلقه‌های قدیمی).

۵. ابزارهای امروزی
Vite برای باندل سریع، TypeScript برای تایپ امن، و ESLint برای کد تمیز.

---

تمرین عملی: یه TODO List بساز با add/delete/edit و توی مرورگر ذخیره‌ش کن.

نظرت چیه؟ کدومش برات گنگ‌تره؟ بگو تا مفصل‌تر بگم. 👇

#جاوااسکریپت #فرانت‌اند #کدنویسی

✨️🦦 کنترل تلویزیون رو تصور کن؛
== == == == == ==
• برای روشن کردن تلویزیون، فقط یه دکمه رو فشار می‌دی.
لازم نیست بدونی داخلش چه مدارهایی هست یا سیگنال چطور ارسال می‌شه.

همین سادگی باعث می‌شه همه بتونن ازش استفاده کنن.

• برنامه‌نویسی هم همینطوره.
وقتی یه کلاس یا یه تابع، استفاده‌ی ساده‌ای داشته باشه، بقیه لازم نیست درگیر جزئیات داخلیش بشن.
== == == == == ==
📌 هرچقدر استفاده از کدت ساده‌تر باشه، احتمال استفاده‌ی درست ازش بیشتره.
== == == == == ==
❗️پیچیدگی، اگه جایی هم وجود داره، بهتره پشت صحنه بمونه.
✨ شب‌تاب | آموزش و رشد در دنیای IT
➖➖➖➖➖➖➖ @init_code

عنوان: فرانت‌اند حرفه‌ای؛ فراتر از سینتکس، نبرد با پیکسل‌ها و نخ‌ها

اگر فکر می‌کنید سخت‌ترین جای جاوااسکریپت، مدیریت Promise.allSettled یا پیاده‌سازی یه custom Hook پیچیده‌ست، لطفاً تا خط بعدی رو نخونید. جای شما روی صندلی‌های معمولیه.

دنیای حرفه‌ای جایی‌ست که دیگه کدتون رو صرفاً برای ماشین‌ مجازی (V8) می‌نویسید؛ بلکه باید برای پردازنده گرافیکی (GPU)، موتور رندرینگ (Blink/WebKit) و حتی هسته‌های فیزیکی پردازنده (CPU Cores) هم کد بزنید. اینجا خبری از دامنه‌ی useEffect نیست؛ جنگ اصلی سر ۶۰ فریم ثانیه‌ی پایداره تو یه اپ با دیتای لحظه‌ای.

۱. قتل‌گاه رندرینگ (Layout Thrashing)
همه می‌دونن تغییر style.width باعث Reflow میشه، اما دولوپر ارشد می‌دونه که خوندن offsetHeight بلافاصله بعد از اون تغییر، توی یه حلقه، یعنی کشتن صریح مرورگر! چون مرورگر مجبور میشه صف تغییرات رو بشکنه و سخت‌افزار رو مجبور به محاسبه‌ی اجباری (Forced Synchronous Layout) کنه.
اینجا راه‌حل، استفاده از الگوی FastDom یا جداسازی فازهای Read و Write با requestAnimationFrame نیست؛ راه‌حل واقعی، مهندسی معکوس درخت رندر و استفاده از تکنیک contain: layout style paint در CSS هست تا به مرورگر بگید "این بخش رو از بقیه‌ی جهان جدا کن و ری‌کالکولیشن رو محدود کن".

۲. توهم لایه‌ها (Compositing & Layers)
اگه فکر می‌کنید will-change: transform یک داروی معجزه‌آسه، سخت در اشتباهید. استفاده‌ی بی‌رویه ازش، معادل ریختن بمب روی حافظه‌ی GPU هست؛ چون مرورگر برای هر المان، یه لایه‌ی مجزا (RenderLayer) توی حافظه‌ی ویدئویی اختصاص میده.
متخصص واقعی می‌دونه چطور با دیباگر لایه‌های کروم (Layers Panel) تعداد لایه‌ها رو زیر ۵۰ تا نگه داره و فقط برای المان‌های متحرک (مثل نقشه یا منوی کشویی) از transform: translateZ(0) استفاده کنه تا ترکیب (Compositing) روی GPU انجام بشه و CPU آزاد بمونه برای پردازش منطق سنگین.

۳. موازی‌سازی واقعی با SharedArrayBuffer و Atomics
اینجا دیگه Web Worker ساده جواب نمیده؛ چون انتقال داده با postMessage همچنان از ساختار Structured Clone استفاده میکنه که یعنی کپی شدن حافظه (حداقل برای دیتای سنگین).
راه نجات، حافظه‌ی مشترک (SharedArrayBuffer) هست. اینجا شما یه بافر خام رو بین ترد اصلی و تردهای کارگری به اشتراک می‌ذارید و با استفاده از قفل‌های سطح پایین (Atomics.wait / Atomics.notify)، هماهنگ‌سازی می‌کنید. مثلاً وقتی یه دیتاست ۱۰۰ مگابایتی از وب‌سوکت میاد، توی Worker اون رو پردازش (مثلاً رمزگشایی Protobuf) می‌کنید، بدون اینکه حتی یک بایت از حافظه‌ی اصلی رو کپی یا بلوکه کنید. اما اخطار جدی: مدیریت Atomics یعنی شبیه‌سازی Mutex در جاوااسکریپت؛ یه اشتباه توی قفل‌گذاری، کل ترد اصلی رو قفل می‌کنه (اگه از Atomics.wait در ترد اصلی استفاده کنید، مرورگر هنگ می‌کنه!).

۴. بهینه‌سازی بارگذاری با Streams API در لایه‌ی فرانت
روزهایی که منتظر می‌موندید تا کل پاسخ ۵۰ مگابایتی fetch بیاد تا JSON.parse کنید، تموم شده. با ReadableStream، می‌تونید پاسخ رو تکه‌تکه (Chunk) پردازش کنید، در حالی که هنوز هدر پاسخ اومده. ترکیب این تکنیک با WebAssembly برای پردازش باینری، یعنی شما قبل از اینکه ریکت حتی شروع به رندر کردن کنه، دیتا رو هضم و نرمالیزه کردید.

---

📌 چالش فنی برای اساتید محض:
چه کسی تا حالا توی محیط Production، با چالش OOM (Out of Memory) ناشی از زیاد شدن تعداد RenderLayers مواجه شده؟ یا تجربه‌ی استفاده از SharedArrayBuffer برای همگام‌سازی یه پلیر ویدیویی با انیمیشن‌های CSS رو داره؟
راه‌حل‌هاتون برای جلوگیری از Starvation (گرسنگی کشی) توی Workerها چیه؟
کامنت‌ها منتظر تجربه‌های خونین شما از میدان جنگ رندرینگ هست! 💀⚡️

کتابچه 0 تا 100 تقدیم به همه ی دانشجویان تا میتونید فروارد کنید تا رایگان در اختیار همه قرار بگیره


https://t.me/ShabTab_Team

SQLite
در مقابل غول‌های دیتابیس؛ وقتی با پیکان میری مسابقه فرمول یک! 🏎️📦

تا حالا شده برای یه پروژه ساده که فقط قراره اسم چند تا کاربر رو ذخیره کنه، به فکر نصب PostgreSQL یا MySQL بیفتی و ۳ ساعت درگیر تنظیمات سرور و یوزر و دسترسی‌ها بشی؟ تبریک میگم، تو هم دچار سندرم «بیش‌ازحد-مهندسی-کردن» (Over-engineering) شدی! 😅

خیلیا فکر می‌کنن استفاده از SQLite نشونه‌ی آماتور بودن یا غیرحرفه‌ای بودن پروژه است. اما بذارید یه رازی رو بهتون بگم: SQLite مثل اون آچار فرانسه‌ایه که توی جیب جا میشه و هیچ‌وقت هم گم نمیشه!

چرا SQLite برای شروع (و حتی خیلی جاهای دیگه) پادشاهه؟
۱. نصب؟ چه نصبی؟: وقتی با Flask کار می‌کنی، SQLite دقیقاً یعنی «هیچی»! لازم نیست دیتابیس رو نصب کنی، کانفیگ کنی یا با هزارتا ارورِ «Connection Refused» بجنگی. فقط یه فایل .db داری و تمام. زندگی یعنی همین!

۲. سریع‌تر از نور (برای شما): برای پروژه‌های کوچیک تا متوسط، سرعت SQLite اونقدر بالاست که اصلاً متوجه نمیشی دیتابیس داری یا داری با یه لیست توی پایتون کار می‌کنی.

۳. قابلیت حمل فوق‌العاده: می‌خوای پروژه رو بفرستی برای دوستت؟ یه دونه فایل .db رو کپی کن و براش بفرست. همین! نه نیازه که اونم دیتابیس نصب کنه، نه نیاز به Export/Import پیچیده داری.

اما کی باید سراغ غول‌ها بریم؟
وقتی که تعداد کاربران همزمان شما از تعداد مورچه‌های خونه‌ی مادربزرگتون بیشتر شد، یا وقتی دیدید که دیتابیس شما داره از حجم حافظه گوشی هم بیشتر میشه، اون موقع وقتشه که به سمت PostgreSQL یا رفقای بزرگترش مهاجرت کنید.

نصیحت برادرانه به تو برنامه‌نویس عزیز:
به‌جای اینکه ۵۰ درصد وقتت رو صرفِ ور رفتن با تنظیماتِ پیچیده دیتابیس‌های سنگین کنی، انرژی‌ت رو بذار روی ساختار داده‌هات (Schema). یه دیتابیس عالی با طراحی غلط، از یه SQLite با طراحیِ هوشمندانه، هزار برابر کندتر و پرباگ‌تره!

نتیجه اخلاقی:
پروژه رو با ساده‌ترین ابزار شروع کن. وقتی به دیواری خوردی که دیگه با SQLite حل نمیشد، اون وقت با افتخار برو سراغ غول‌ها. تا اون موقع، از سادگی لذت ببر و کد بزن، چون اون چیزی که به برنامه‌ت اعتبار میده، کیفیت کد توئه، نه اسمی که روی دیتابیس گذاشتی! 💻✨

#SQLite #برنامه_نویسی #پایگاه_داده #Flask #Python #کدنویسی #CleanCode #طنز_برنامه_نویسی #برنامه_نویس #دیتابیس #توسعه_وب #BackEnd

هزاران آموزش برنامه نویسی
@init_code

درود خدمت تمامی دوستان


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


دوره های فعلی:

همینک امکان ثبت نام دارد:

الگوریتم و فلوچارت
C++ مقدماتی

➖➖➖➖➖➖➖➖➖➖➖➖➖

به زودی ثبت نام اطلاع رسانی می شود:

پایتون مقدماتی


مینی دوره هک و امنیت

C++ پیشرفته


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


جهت شرکت در دوره ها و مشاوره پیوی تشریف بیارید:

@P_00_15

🚕 تاکسی‌شبی با سه مسافر عجیب!

دیشب سوار تاکسی شدم، سه تا مسافر دیگه هم بودن. یکی گفت «من HTMLم»، اون یکی گفت «CSSام»، اون سومی هم گفت «منم JS».

گفتم: «خوش به حالتون! با هم که هستین، حتماً دنیا دست‌تونـه!»

یهو راننده پیچید و گفت: «آقا اینا رو ول کن، من با یه دونه‌شون کار دارم!»

---

🚦 اونجا بود که بحث داغ شد:

HTML گفت: «من اساسِ همه‌چیم! اگه من نباشم، شما کجا می‌خواین رنگ بدین یا کار کنید؟ من می‌گم اینجا دکمه‌ست، اونجا عکسه، این پایین فوتره. من مثل تار و پودِ یه پارچه‌ام!»

CSS خندید و گفت: «آره، ولی اون پارچه رو کی می‌دوزه؟ کی بهش طرح و نقش می‌ده؟ کی می‌گه این دکمه گرد باشه یا مربع؟ من مثل دستِ خیاطم، اگه من نباشم، پارچه‌ات فقط یه تیکه کرباسِ بی‌مزه‌ست!»

JS تا خواست چیزی بگه، راننده ترمز کرد و گفت: «بسه دیگه! اینم از آقا جاواسکریپت. بدون اون، همه‌چیز ایستاس، مثل مجسمه. ولی با اون، کل ماشین می‌رقصه!»

من گفتم: «خب حالا بگید ببینم، کدومتون مهم‌ترینین؟»

---

🤯 جالبه بدونین، هیچ‌کدوم جواب ندادن!

چون هر کدوم به اون دو تای دیگه نگاه کردن و فهمیدن که:

· اگه HTML نباشه، بقیه هیچ‌چیزی برای نمایش ندارن.
· اگه CSS نباشه، بقیه مثل یه آهنگ بی‌ریتم می‌مونن.
· اگه JS نباشه، بقیه مثل یه کتابِ بی‌صفحه‌گردان می‌شن!

---

🌟 خاصیت خلاقیتشون اینجاست:

یه وقتایی فکر می‌کنی تازه‌کاری، ولی:

· با یه flexbox درست، حسابی جلوی مشتری رو می‌گیری.
· با یه transition کوچولو، کاربر رو غافلگیر می‌کنی.
· با یه addEventListener ساده، به سایت روح می‌دی.

خلاقیت یعنی:

«همون سه‌تا ابزار تکراری رو جوری به کار ببری که آدم بگه وای، این رو از کجا آوردی؟!»

---

پس اینو بدون:

· HTML = اسکلت (بدون اون، فرو می‌ریزی)
· CSS = لباس و آرایش (بدون اون، کسی نگاهت نمی‌کنه)
· JS = روح و حرکت (بدون اون، فقط یه تابلوئین)

و تو = کارگردانی که این سه‌تا رو هماهنگ می‌کنه! 🎬

---

💡 یه تمرین خلاقانه برات دارم:

برو یه صفحه ساده بساز، ولی اینبار:

· توی HTML از تگ‌های معنایی استفاده کن (نه فقط div).
· توی CSS یه گرادیان متحرک بذار.
· توی JS یه دکمه بذار که با هر کلیک، ترتیب المان‌ها رو عوض کنه.

بعد به خودت بگو: «این رو من ساختم، با همون سه‌تا داداشی!» 😎

---

نظرت چیه؟
تو کدوم‌شون بیشتر غرق می‌شی؟ کدوم‌شون برات چالش‌برانگیزتره؟
بیا پایین برام بنویس، مشتاق‌ام بدونم! 👇❤️‍🔥

به نام اون که تگ‌ها رو جفت‌وجور کرد 😄

چهارشنبه‌ها رو با یه حقیقت شیرین شروع می‌کنم:
من با سه تا داداشی به اسم HTML، CSS و JS زندگی می‌کنم. نه، شوخی نیست! راستش این سه‌تا بودن کنار هم، معجزه‌گرن. بیا ببینم هرکدوم چیا بلدن:

---

🔹 داداش HTML:
مثل اسکلت خونه‌مون می‌مونه. اون میاد می‌گه: «بابا اینجا هدره، اینجا فوتره، اینم یه دکمه‌ست واسه کلیک!»
بدون اون، هیچ‌چیز معنی نداره. ولی خب، خامه‌ست، بی‌رنگ، بی‌روح، ولی امان‌ت‌داریش وای که چقدر مهمه!

---

🔸 داداش CSS:
این یارو، نقّاش خونه‌ست. اون میاد به اون اسکلت خام، رنگ و لعاب، فونت و فاصله، انیمیشن و سایه می‌ده.
با یه hover ساده، دل آدم می‌ره واسش! اگه HTML نباشه، این هنرمند بی‌کاره‌ست. ولی اگه باشه، زیباترین قصرها رو می‌سازه.

---

🔹 داداش JS (همون جونیورِ زرنگ):
این دیگه روح خونه‌ست! بدون اون، همه‌چیز ایستاست. اما با اون، دکمه‌ها کلیک می‌خورن، فرم‌ها اعتبارسنجی می‌شن، لیست‌ها آپدیت، و اگه خوش‌ذوق باشی، بازی ماریو هم توی مرورگرت راه می‌ندازی!

---

حالا خاصیت خلاقیتشون چیه؟

اگه هرکدوم تنها باشن، یه «چیز»ن:

· HTML تنها = یه متن ساده
· CSS تنها = یه نقاشی بدون قاب
· JS تنها = یه ماشین حسابِ بی‌دکمه!

اما وقتی دست به دست هم می‌دن:
👉 یه داشبورد مدیریتی می‌شن
👉 یه سایت شخصی عاشقانه می‌شن
👉 یه ابزار هواشناسی که با یه API حرف می‌زنه
👉 یه گالری عکس که با اسکرول، قشنگ‌ترین انیمیشن‌ها رو اجرا می‌کنه

---

رازش اینه:
خلاقیت، توی چیدمان این سه‌تاست. توی این که چطوری باهاشون حرف بزنی. توی این که به جای div از section استفاده کنی، به جای px از rem، به جای alert از یه مودال خوش‌گل.

---

پس داداش‌فرانت‌اندی،
اگه دلت می‌خواد یه کار خاص کنی، برو با این سه‌تا رفیق‌تر بشو. بذار HTML بهت بگه «چی»، CSS بهت بگه «چطور»، و JS بهت بگه «کی».

حاصلش می‌شه: وب‌سایتی که نه فقط دیده، که حس بشه. ❤️‍🔥

---

📌 نظرت چیه؟ تو کدومشون قوی‌تری؟ یا کدوم رو بیشتر دوست داری؟
برام بنویس، خوش‌حال می‌شم بدونم! 👇😊

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


قیمت دوره پایتون مقدماتی ۶۰۰ تومن هست و حالت قسط بندی هم داریم



جهت ثبت نام پیوی تشریف بیارید

@P_00_15