تا حالا شده یه سایتی رو باز کنی و ببینی عکس‌ها نصفه‌نیمه میان، متن‌ها یهو جابجا میشن و کلاً سایت تا چند ثانیه شبیه یه اتاق به هم ریخته‌ست؟
اینجاست که یه قهرمان به اسم PreloaderWrapper وارد داستان میشه.

حالا این PreloaderWrapper اصلاً چی هست؟

بذارید با یه مثال ساده بگم: فرض کنید رفتید تئاتر. وقتی روی صندلی می‌شینید، پرده‌ها کشیده شده. پشت پرده، بازیگرها دارن لباس می‌پوشن و دکور داره چیده میشه. وقتی همه چیز ۱۰۰٪ آماده شد، پرده میره کنار و شما یه نمایش بی‌نقص می‌بینید.

توی دنیای فرانت‌اند (مثل ریکت و نکست)، PreloaderWrapper دقیقاً همون پرده‌ی تئاتر یا همون سالن انتظار سایته، یعنی وقتی کاربر سایت رو باز می‌کنه، به جای اینکه محتوای نصفه‌نیمه و در حال لود شدن رو ببینه، اول یه صفحه خوشگلِ لودینگ (مثل یه لوگوی در حال چرخش یا یه انیمیشن جذاب) می‌بینه. وقتی دیتای سایت کامل لود شد و سایت خوش‌تیپ شد، این پرده میره کنار و محتوای اصلی نمایش داده میشه.

چرا باید ازش استفاده کنیم؟

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

توی کد چطوری کار می‌کنه؟ (به زبان خیلی ساده)

ما کل سایتمون رو می‌ذاریم داخل این PreloaderWrapper. بهش میگیم ببین آقای Wrapper، تا وقتی که عکس‌ها و اطلاعاتِ من کامل از سرور نرسیده، همون انیمیشن لودینگت رو به کاربر نشون بده. هر وقت گفتم آماده‌ام، لودینگ رو قایم کن و سایت رو نشون بده یا حتی بعضی وقتا برای اینکه یه زیبایی خاصی بده به سایتمون هنگام بالا اومدن برای کاربر, ما خودمون این رو تنظیم می کنیم که سایت لود بشه نشه ۵ ثانیه مثلا نمایش داده بشه.

ساختارش تو ذهن ما یه چیزی شبیه به اینه:

اگر (سایت هنوز آماده نیست) {
   انیمیشن لودینگ رو نشون بده 
} در غیر این صورت {
   محتوای اصلی سایت رو نشون بده 
}

به همین سادگی, با یه ایده کوچیک، تجربه کاربری (UX) سایتت از زمین تا آسمون فرق می‌کنه.

✦ @programming_codiing

- بهترین روش‌ها برای نوشتن کامنت در کد &
- 9 قانون مهم کامنت‌نویسی &
- برنامه‌ها برای چه کسانی نوشته می‌شوند؟

🔗 READ

✦ @programming_codiing

EmailJS
چیه؟

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

مراحل استفاده:

1. در سایت EmailJS ثبت‌نام کنید.
2. سرویس ایمیلتون رو به EmailJS متصل کنید.
3. یک Email Template بسازید.
4. "Service ID"، "Template ID" و "Public Key"
رو دریافت کنید.
5. پکیج EmailJS رو نصب و در پروژه استفاده کنید.
6. اطلاعات فرم رو با EmailJS ارسال کنید.

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

اگر جایی از پیاده‌سازی به مشکل خوردید، می‌تونید از ChatGPT کمک بگیرید و خیلی راحت هندلش کنید.
بهترین مزیت ش هم اینه که توی سایت پورتفولیو مثلا می تونید استفاده کنید و.. و نیازی به vpn هم نیست برای ارسال پیام، خودم ازش استفاده کردم و کاملا عالی بود.

✦ @programming_codiing

تخفیف صد در صدی مکتبخونه روی ۵۰۰ تا دوره

با رفتن به https://mktb.me/um8m/ می‌تونین جزییات رو ببینین. ولی خب به شکل خلاصه، مکتبخونه یه بار دیگه روی ۵۰۰ تا دوره یک کد تخفیف ۱۰۰٪ گذاشته؛

کد تخفیف هم هست: IRANMAHER

✦ @programming_codiing

بعضی وقتا بهترین کاری که می‌تونی برای پروژه انجام بدی اینه که هیچ کدی ننویسی.
اول مسئله رو بفهم، بعد کد بزن.
خیلی از باگ ها و مشکل هایی که می تونه بوجود بیان، همون اول کار حل می شن برات.

✦ @programming_codiing

اگه طولانی بودن class های تیلویند اذیت‌تون می‌کنه، این اکستنشن رو رو VsCode نصب کنین.

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

✦ 💻 @programming_codiing

سافت اسکیل یا مهارت نرم چیه؟

وقتی صحبت از مهارت میشه، معمولاً ذهنمون میره سمت چیزهایی مثل HTML، CSS، JavaScript، React و...

این‌ها مهارت‌های فنی یا Hard Skill هستن.

اما یه سری مهارت دیگه هم وجود دارن که شاید مستقیم به کدنویسی مربوط نباشن، ولی تأثیر زیادی روی موفقیت ما دارن؛ به این‌ها میگن Soft Skill یا مهارت نرم.

مهارت نرم یعنی اینکه چطور فکر می‌کنیم، چطور با دیگران ارتباط برقرار می‌کنیم و چطور با مشکلات و موقعیت‌های مختلف برخورد می‌کنیم.

مهم‌ترین مهارت‌های نرم برای یک برنامه‌نویس:

• حل مسئله
• ارتباط درست و مؤثر
• مدیریت زمان
• مسئولیت‌پذیری
• کار تیمی
• یادگیری مداوم
• تفکر انتقادی
• تصمیم‌گیری
• صبر و مدیریت استرس
• توانایی پذیرش بازخورد
• اعتمادبه‌نفس
• سازگاری با تغییرات

خیلی‌ها روی مهارت‌های فنی تمرکز می‌کنن و دائماً دنبال یاد گرفتن زبان و فریم‌ورک جدید هستن، اما مهارت نرم هم به همون اندازه مهمه.

ممکنه دو نفر دانش فنی تقریباً یکسانی داشته باشن، ولی کسی که بهتر مشکل حل می‌کنه، بهتر ارتباط برقرار می‌کنه، مسئولیت‌پذیرتره و می‌تونه با دیگران کار کنه، معمولاً عملکرد بهتری خواهد داشت.

چطور سافت اسکیل‌هامون رو تقویت کنیم؟

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

برای شروع می‌تونید هر ماه روی یک مهارت تمرکز کنید.

مثلاً یک ماه روی مدیریت زمان، ماه بعد روی ارتباط بهتر با دیگران و بعد روی حل مسئله.

برای تقویت حل مسئله، سعی کنید قبل از کمک گرفتن کمی خودتون فکر و تحقیق کنید.

برای تقویت ارتباط، یاد بگیرید واضح‌تر صحبت کنید و سوالاتتون رو دقیق‌تر بپرسید.

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

برای تقویت تفکر انتقادی هم هر چیزی رو بدون فکر قبول نکنید؛ تحقیق کنید و دلیلش رو بفهمید.

در آخر یادتون باشه:

Hard Skill مشخص می‌کنه چه کاری بلدید انجام بدید، اما Soft Skill مشخص می‌کنه چطور اون کار رو انجام می‌دید.

برای حرفه‌ای شدن، فقط یاد گرفتن تکنولوژی‌های جدید کافی نیست؛ باید روی نحوه فکر کردن، رفتار کردن و کار کردنمون هم سرمایه‌گذاری کنیم.

✦ @programming_codiing

اگه موقع کدنویسی مدام دنبال مستندات HTML، CSS، JavaScript، React و کلی تکنولوژی دیگه می‌گردی :

🔗 DevDocs

در واقع یه مرجع جمع‌وجور از مستندات برنامه‌نویسیه که همه‌چیز رو مرتب و سریع در اختیارت می‌ذاره.

حتی می‌تونی مستندات موردنیازت رو دانلود کنی و آفلاین هم ازشون استفاده کنی.

✦ 💻 @programming_codiing

شاید خودت نجات پیدا نکنی، ولی کدات نجات پیدا می کنن :))

هر برنامه نویسی تو هر حوزه‌ای فرق نمی کنه، باید گیت گیتهاب یاد بگیره.

✦ @programming_codiing

می تونید از سایت زیر استفاده کنید برای ساخت تِم دلخواه خودتون برای VsCode :

🔗 https://themes.vscode.one/

✦ @programming_codiing

اکستنشن ESLint برای VS Code یه ابزار کاربردی برای بررسی کده.

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

ویژگی‌ها:

+ شناسایی خطاها و هشدارها
+ امکان تنظیم قوانین
+ نمایش مشکلات مستقیم داخل کد
+ کمک به نوشتن کد تمیزتر و استانداردتر

پ.ن : اگر اول راه هستین شاید بهتره نصب نکنین، خودتون ارور ها رو پیدا کنین بهتر تو ذهنتون می مونه.

✦ @programming_codiing

اِصطلاح داریم میگه:

Jack of all trades, master of none

یعنی از هر کاری یه ذره بلدی، اما تو هیچ‌کدوم واقعاً متخصص نیستی.

این موضوع فقط برای برنامه‌نویس‌های تازه‌کار نیست؛ حتی آدم‌های حرفه‌ای هم ممکنه گرفتار همین قضیه بشن.

همیشه چیزهای جدیدی برای یاد گرفتن وجود داره. هر روز یک ابزار، تکنولوژی یا مهارت جدید می‌بینیم و وسوسه می‌شیم که سریع بریم سراغ یاد گرفتنش.

اما مشکل از جایی شروع میشه که مدام از این شاخه به اون شاخه بپریم و هیچ‌وقت برای عمیق شدن روی یک موضوع وقت نذاریم.

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

اما بعد از اینکه مسیرت رو پیدا کردی، باید کم‌کم تمرکزت رو بیشتر کنی و عمیق‌تر یاد بگیری.

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

قبل از اینکه سراغ یاد گرفتن چیزی جدید بری، از خودت بپرس:

آیا واقعاً بهش نیاز دارم؟
آیا به مسیر من مرتبطه؟
آیا قراره دانشی که الان دارم رو کامل‌تر کنه؟

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

تعداد چیزهایی که بلدی مهم نیست؛ مهم اینه که چقدر تو چیزهایی که یاد گرفتی عمیق شدی و حرفه ای هستی.

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

✦ @programming_codiing

- علاقه می‌گه: من از این کار لذت می‌برم.
- مهارت می‌گه: من این کار رو بلدم.
- ارزش‌آفرینی می‌گه: این کار برای دیگران مهمه.
- معنا می‌گه: انجام این کار برای من ارزش داره.

شغل خوب جایی شکل می‌گیره که این چهار تا به هم می‌رسن.

✦ @programming_codiing

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

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

✦ @programming_codiing

تا حالا فکر کردید چطور ممکنه یه فایل ZIP فقط چند مگابایت حجم داشته باشه، اما بعد از Extract شدن تبدیل به چندین گیگابایت فایل بشه؟

جادویی در کار نیست؛ همه‌چیز برمی‌گرده به یک چیز: تکرار.

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

مثلاً اگر یک الگو بارها تکرار شده باشه، به‌جای ذخیره کردن کامل اون در هر بار، می‌تونه فقط بگه: «همون بخش قبلی رو دوباره تکرار کن.»

ZIP
برای این کار از روش‌هایی مثل LZ و Huffman Coding استفاده می‌کنه؛ یکی برای پیدا کردن و خلاصه‌کردن الگوهای تکراری و دیگری برای بهینه‌تر کردن نحوه ذخیره باقی داده‌ها.

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

پس دفعه بعد که دیدید چند مگابایت فایل، بعد از Extract شدن تبدیل به ده‌ها گیگابایت شد، بدونید پشت این اتفاق یک جادوگر نشسته نیست؛ چند الگوریتم خیلی باهوش دارن کارشون رو انجام می‌دن.

✦ @programming_codiing

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

دانشجو عادت کرده خودش بنویسه.
ولی وارد پروژه‌ی واقعی که میشه مثل یه تیم که تازه واردش شده، چند هزار خط کد جلوشه که اشخاص دیگه‌ای نوشتن.
اونجا دیگه کسی ازت نمی‌پرسه بلدی map استفاده کنی؟ ..

باید بفهمی این کد چرا این شکلی نوشته شده، کجا ممکنه خراب بشه و اگر بخوای تغییرش بدی از کجا باید شروع کنی.

ایناس گیتهاب برات غوغا می کنه، هزاران هزار پروژه هست که می تونی بخونیش.

✦ @programming_codiing

همه پروژه‌ها یک مدل نیستن؛ هر پروژه با توجه به هدف و نحوه توسعه، می‌تونه نوع متفاوتی داشته باشه.

🔹 Open Source
سورس‌کد پروژه برای عموم در دسترسه و بقیه می‌تونن کد رو ببینن، استفاده کنن یا در توسعه‌ش مشارکت کنن.

🔹 Commercial
پروژه‌ای که با هدف کسب درآمد ساخته می‌شه؛ مثل یک سرویس یا محصولی که فروخته می‌شه.

🔹 Personal
پروژه‌ای که برای یادگیری، تمرین، نمونه‌کار یا استفاده شخصی ساخته می‌شه.

🔹 Freelance
پروژه‌ای که به سفارش مشتری انجام می‌دین و در ازاش هزینه دریافت می‌کنین.

🔹 Startup
پروژه‌ای که با یک ایده شروع می‌شه و هدفش تبدیل شدن به یک کسب‌وکار و رشد کردنه.

🔹 Enterprise
پروژه‌های بزرگ و پیچیده برای شرکت‌ها و سازمان‌ها که معمولاً بخش‌ها و کاربران زیادی دارن.

🔹 Team Project
پروژه‌ای که چند نفر به‌صورت تیمی روی اون کار می‌کنن و هرکس مسئول بخشی از پروژه‌ست.

🔹 Private Source
سورس‌کد پروژه عمومی نیست و فقط افراد مشخصی به اون دسترسی دارن.

می تونید در مورد هر کدوم بیشتر تحقیق کنید.

✦ @programming_codiing

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

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

✦ @programming_codiing

دنبال پروژه‌های Open Source برای بررسی می‌گردی؟

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

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

🔗 https://www.opensourceprojects.dev/

✦ @programming_codiing

سی پی یو (CPU) واقعاً چطور کار می‌کنه؟

خیلی وقت‌ها می‌دونیم کدمون اجرا می‌شه، اما نمی‌دونیم در سطح سخت‌افزار چه اتفاقی می‌افته.

سایت زیر خیلی جالب و باحال در خدمت شماست برای درک عمیق تر cpu :

🔗 https://cpu.land

✦ @programming_codiing

5 سایت رایگان و باحال برای تایپ 10 انگشتی

🔗 TypingClub⁠
🔗 Keybr⁠
🔗 Monkeytype⁠
🔗 Typing
🔗 Wetype

✦ @programming_codiing