https://virgool.io/feed/@alipalvane که آفتاب بیاید... fa 2026-06-29 08:32:56 https://files.virgool.io/upload/users/541519/avatar/8AuGjN.png?height=120&width=120 https://virgool.io/@alipalvane https://virgool.io/@alipalvane/add-fonts-next-bejzuwgidhmg با اضافه شدن انواع مختلف فونت ها به ترندهای طراحی وب، توسعه دهندگان در قبال استفاده از این فونت ها و تایپوگرافی ها هم مسئولیت دارن و باید خلاقانه عمل کنن، چونکه انتخاب فونت درست می تونه یک تجربه کاربری مناسب را برای کاربران وب ایجاد کنهدر next.js هم راه های مختلفی برای اضافه کردن فونت به وب اپ وجود داره که قراره بررسیشون کنیم.در این مطلب به این روش ها می پردازیم که شامل :گوگل فونتفونت محلی یا لوکالافزودن فونت از طریق تیلویند (TailwindCSS)اضافه کردن سراسری از طریق گوگل فونت (Google Font)در حالت معمول اپ نکست جی اس ما از این سیستم استفاده می کنه و فونت سراسری پروژه ما رو از طریق گوگل فونت کانفیگ می کنه، برای این امر کافیه فایل layout.tsx توی مسیر روت پروژه رو نگاه کنین که از فونت Inter استفاده شده و شما نیازه تا از طریق وبسایت google fonts فونت های خودتون رو انتخاب کنیناین کار در سه مرحله انجام میشه:اول باید فونت مورد نظر رو انتخاب و توی پروژه import کنیمتعریف فونت به صورت آبجکتیافزودن فونت به کلاس های bodyو نتیجه کار هم که مشخصه توی تصویر زیراضافه کردن فونت از طریق Tailwind CSSاگر با تیلویند کار کرده باشین این کتابخونه انعطاف خیلی خوبی برای کار با کلاس ها و استایل ها بهمون میده که این بار میخوایم با استفاده از خاصیت متغیرهایی که داره از چند فونت مختلف استفاده کنیمابتدا کافیه فونت هایی که میخوایم رو توی فایل layout از طریق گوگل فونت اضافه کنیم به پروژه ;که ما دو فونت oswald و فونت inter رو اضافه کردیمبرای هر کدوم از فونت ها متغیر تعریف کردیم و هر کدوم توی آبجکت جداگونه خودش و حتما حتما variables برای فونت ها باید تعریف بشهو همه فونت های تعریف شده رو به کلاس های body پاس میدیم که میخوایم از همه فونت ها توی پروژه استفاده کنیمحالا نوبت به تعریف فونت ها توی فایل tailwind.config.ts/js می رسه که باید فونت های تعریف شده توی layout برای تیلویند هم کانفیگ بشن تا بشه ازشون توی کلاس های تیلویندی استفاده کرد (عکس زیر):ما توی بخش fontfamily فونت ها رو با همون اسمی که توی variables نوشتیم فراخوانی میکنیمحالا کار تمومه و بریم توی صفحه نشونش بدیممن به تایتل فونت Inter و به محتوا فونت oswald رو دادم و نتیجه توی مرورگردو فونت کاملا جدا که قابل تشخیصه که خانواده این فونت ها یکی نیست.اضافه کردن فونت دلخواه به‌صورت لوکال یا محلی (Local Font)اگر پروژه ما به هر زبانی بجز زبان انگلیسی بود یا اصلا پروژه ما به فونت هایی نیاز داشت که توی گوگل فونت قابل دسترسی نبود پس نمیتونیم از این قابلیت نکست برای فونت ها استفاده کنیم نیازه که فونت ها رو به‌صورت لوکال تو پروژه تعریف کنیم که ما ایرانی ها برای سایت های فارسی زبان بیشتر بهش نیاز داریمپس به صورت زیر باز هم میتونیم اگر بخوایم به‌صورت سراسری تعریفش کنیم اونو انجام بدم که ما تو این مثال فونت یکان بخ رو میخوایم به صورت لوکال به پروژه اضافه کنیمابتدا باید localFont از خود نکست فراخوانی بشهمسیر فونت رو براش تعریف کنیم و اونو توی یه متغیر قرار بدیمبه کلاس های body اونو پاس بدیم و کار تمومه!!!!!!!و خب اینم نتیجه کار :امیدوارم مفید بوده باشه علی پالوانه علی پالوانه Thu, 08 Feb 2024 12:50:49 +0330 https://virgool.io/codenevis/usegitkeep-lf4miigchmlz کدنویسی پروژه که شروع میشه ما همیشه ساختار پروژه رو از ابتدا ایجاد میکنیم مثلا یک پوشه assets برای فایل های استایل و اسکریپت و تصاویر و ... میسازیم یک پوشه src برای اینکه محتوای اصلی پروژه مثل صفحات و کامپوننت ها و ... رو توش ایجاد کنیم و در بیشتر مواقع این پروژه هارو روی گیت هاب میفرستیم.اما در روند پروژه ممکنه ما نیاز داشته باشیم پوشه هایی رو درست کنیم ولی بعدا فایل های درون اون ها رو ایجاد کنیم مثلا:ما پروژه وب اپ خودمون رو جلو میبریم و در ادامه نیاز پیدا میکنیم که یک state management مثل ریداکس رو به پروژه اضافه کنیم یا حتی خیلی ساده بررسی کنیم قراره یه فونت جدید به پروژه اضافه کنیم اما هنوز فونتی به دستمون نرسیده اما میایم یه پوشه fonts توی assets ها میسیازیم تا فونت هارو به دستمون برسونن اما در زمان نیاز به این کار نداریم ولی لازمه که ساختار ایجاد بشه تا حداقل موقع ارائه و یا توضیح راجب پروژه نشون بدیم که : "بله! این ویژگی هم قراره در ادامه به پروژه اضافه بشه و ازش استفاده کنیم"اما اینجا یک مشکل داریم!گیت نمیتونه دایرکتوری یا پوشه های خالی رو push کنه و فقط دایرکتوری هایی رو دنبال میکنه که فایل دارن یا به اصلاح فایل هارو track میکنه. (میتونی یه پوشه خالی بسازی و push کنی میبینی که روی گیت هابت وجود نداره)من برای شروع یه پروژه ایجاد کردم که یه فایل app.js داره و یه پوشه که خالیه و هیچی توش نیست به اسم empty-directoryساختار پروژهحالا بریم این پروژه رو توی گیت هاب پوش کنیم ببینیم کدوم فایل ها track میشن توسط گیت:گیت هابمیبینیم در نهایت چیزی که من توی ریپو گیت هابم دارم فقط یه فایل app.js هست و خبری از دایرکتوری خالی من نیستاما چطوری پس این پوشه یا دایرکتوری که فعلا قراره خالی بمونه رو من توی گیت هاب پوش کنم؟راه حل!کافیه توی همون دایرکتوری یه فایل gitkeep. ایجاد کنی تا بوسیله گیت این دایرکتوری هم track بشهساختار جدید پروژهابهام!چرا از gitignore استفاده نکنیم؟ که در جواب میشه گفت: "چرا میتونین"اصلا میتونین یه فایل readme.md یا یه فایل تکست یا هرچیزی با هراسمی ایجاد کنین و توی دایرکتوری بذاریناما تفاوتی که هست استفاده از gitignore ممکنه کار درستی نباشه چون از این فایل استفاده میکنیم تا یک سری فایل ها یا دایرکتوری های خاص track نشن پس شاید جالب و درست نباشه که از این اسم استفاده کنیم و در بیشتر داکیومنت ها از gitkeep برای track شدن دایرکتوری های خالی استفاده میشه که خب بهتره ما این اصل رو رعایت کنیمبیشتر بخوانیمدوتا لینک هم قرار میدم که اگر دوست داشتین از رفرنس های دیگه بخونین 😎👌What are the differences between .gitignore and .gitkeep?Use .gitkeep to commit & push علی پالوانه علی پالوانه Thu, 01 Feb 2024 11:03:47 +0330 https://virgool.io/@alipalvane/const-in-object-hymcj7vbleb3 مقدار const توی جاوا اسکریپت میتونه تغییر کنه؟سوالی که خیلی توی مصاحبه های کاری ممکنه پرسیده بشه اینه که تفاوت var, let, const چیه؟ و خب همون جوابای همیشگی که شما بهتر از من بلدین رو میدین بهشون و تمومه!اما سوال دومی که مطرح میشه اینه:مقدار const توی آبجکت میتونه تغییر کنه یا نه؟بله! مقادیر properties و همچنین متدها میتونن توی آبجکتی که با const تعریف شده تغییر کنناما خب بریم توضیحش بدیم که یعنی چی اصلاوقتی با مفهوم const توی یادگیری جاوا اسکریپت آشنا شدین بهتون گفته شده وقتی با const مقداری رو تعریف می‌کنین قابل تغییر نیست و یک بار تعریف میشه و نمی‌تونین دوباره به اون مقدار جدیدی رو بدینمثلا کد زیر:const age = 32 console.log(age) //32 age = 25 //Error : Cannot assign to &quotage&quot because it is a constant const age = 45 //Error : Cannot assign to &quotage&quot because it is a constantگرفتی چی شد؟ ما یکبار متغیر age رو تعریف کردیم و برابر 32 گذاشتیمدیگه نمی‌تونیم باز بیایم یه const با همون اسم بسازیم یا اصلا همون متغیر رو یه مقدار جدید بهش بدیم!خب بحث const رو تو حالت گلوبال می‌بندیم ?اما توی آبجکت بریم بررسیش کنیمهمون جوابی که اول گفتیم : مقادیر properties و همچنین متدها میتونن توی آبجکتی که با const تعریف شده تغییر کننconst person = { name: 'ali', age: 32 } console.log(person.age) // 32 person.age = 45 console.log(person.age) // 45توی مثال بالا ما یه ثابتی (const) به اسم person ساختیم که property های اون name, age هستنما age property رو برابر 32 گذاشتیم و وقتی لاگ گرفتیم خروجی 32 شداما وقتی مقدارش رو تغییر دادیم به 45 دیدیم که دوباره لاگ گرفتیم این بار 45 شدپس نتیجه میگیریم که توی آبجکت ها میشه value یا همون مقادیر properties و methods رو تغییر داداما یادتون نره شما بازم اجازه ندارین یه const دیگه به اسم person بسازیداما علت اینکه میتونیم value هارو توی آبجکت تغییر بدیم چیه؟هر متغیری که تعریف میکنی توی آبجکت یه رفرنسی داره که اون توی حافظه ذخیره میشه نه مقدار valueتو هم رفرنس رو نمیخوای عوض کنی و فقط داری مقدار value رو تغییر میدی و با تغییر value باید عرض کنم که رفرنس اصلی هیچ تغییر نمیکنه!امیدوارم تونسته باشم درست برسونماگر هم خوب توضیح ندادم می‌تونین خیلی کوتاه و مختصر به این لینک هم سر بزنین :https://usefulangle.com/post/342/javascript-const-object-change-property علی پالوانه علی پالوانه Thu, 10 Aug 2023 12:19:01 +0330 https://virgool.io/@alipalvane/bad-side-freelancer-e1frx8xjt1dd شاید کلمه فریلنسری جذاب و باکلاس باشه، شایدم کلی آدم که تازه میخوان تخصصی رو شروع کنن به سمتش جذب بشن!اما این جذب شدن ها به چه دلیلی میتونه باشه؟ چه انگیزه و جملاتی پشت این جذب شدن هست؟توی این مطلب به بررسی جمله‌ها می‌پردازیم و حقیقت‌هایی که پشت این جملات هست که شما از اون خبر ندارین!مقدمه‌ای از منمنم مثل خیلی از کسایی که تازه شروع به یادگیری مهارتی میکنن با دیدن تبلیغات بقیه تشویق شدم به سمت فریلنسری حرکت کنم توی این مسیر مدتی فریلنس کار کردم و بعد سمت کارمندی رفتم و همزمان با کار کارمندی شروع به گرفتن پروژه‌های فریلنسری در کنار اون کردم پس مطالبی که گفته میشه صرفا تجربیات خودم هستش و ممکنه برای خیلی از ماها متفاوت باشهاما حرف بسه بریم سراغ حقایق فریلنسری که ممکنه به شما گفته نشه!!!! ?در فریلنسری شما مدیر ندارین، مدیر فقط خودتونیناگر بهش دقت کنین همه ما تو هر حوزه ای که باشیم چه بیکار چه شاغل ما همیشه مدیر خودمون هستیم یعنی اگر منظور ما از مدیر خودمون بودن این باشه که مدیریت مالی، مدیریت زمان و.... رو تو زندگیمون رو باید برعهده بگیریم این یه چیز طبیعی هست پس فقط برای فریلنسرها نیست همه افراد باید مدیریت منابع خودشون رو یادبگیرن.اما اگر "مدیر خودتی" یعنی از کسی دستور نمیگیری باید عرض کنم کارفرمای شما که پروژه رو به شما داده دقیقا مدیر شماست و نه تنها یک مدیر دارین بلکه اگر بیش از یک پروژه داشته باشین پس در عین واحد چندین مدیر دارین با چندین ویژگی اخلاقی که باید بتونین به همه اونا پاسخگو باشین!چون شما بعنوان یک فریلنسر وظیفه دارین کارفرمای خودتون رو از روند کار مطلع کنین و پروژه رو مطابق میل اون جلو ببرین! ?فریلنسرها خودشون زمان خودشون رو تعیین میکننواقعا؟ شما یک پروژه میگیرین همیشه شما نیستین که مدت زمان تعیین میکنین بلکه کارفرما هم زمان مدنظرش رو میگه و روی یک مدت خاص مثلا 10 روزه به توافق میرسین!توی حالتی که پروژه ممکنه سنگین باشه یا به باگ بخورین یا قطعی برق یا قطعی اینترنت یا مریض شدن شما و به هردلیلی که ممکنه کار عقب بیوفته! آیا شما می‌تونین تعیین کنین که من یک فریلنسرم پس 2 ظهر بیدار میشم و 8 شبم میخوابم!نخیر اصلا اینطوری نیست و گاها شما مجبوووووووری حتی از تایم استراحت و تعطیلات خودت هم بگذری تا بتونی پروژه رو برسونی! پس همچین هم شما نمیتونی زمان رو خودت تعیین کنیصرفا میتونی این زمان رو مدیریت کنی که چقدر کار کنی و چقدر به تفریحات یا هابی هات برسی!?تو خونه کار میکنی و پول در میاریاز تمام فریلنسرها اگر سوال کنین تعداد مشتری های این ماهشون با ماه قبلش و ماه قبل ترش هم یکی نبوده این یعنی تعداد مشتری ها همیشه ثابت نیست که شما مطمئن باشی که همیشه می‌تونی پروژه بگیری و همیشه توی دستت پول باشه!اتفاقات رو مرور کنیم! فیلتر کردن خیلی از سایت ها و پلتفرم ها، تحریم کردن خیلی از سرویس دهنده‌ها، گرون شدن دلار و.....آیا همه این‌ها روی کار فریلنسرها تاثیر نمیذاره؟ بعنوان مثال اگر پلتفرمی مثل اینستاگرام یکدفعه بسته شده چند فریلنسر که کار ادمین این صفحات رو داشتن یا طراح پست و کاورها بودن مجبور شدن کارشون رو عوض کنن؟!حالا این اتفاق توی کسب و کار شما بیوفته! قطعا مشتری هاتو از دست میدی حداقل برای مدت زمانی که این مدت زمان ممکنه چندین ماهه باشه و چندین ماه بی پولی قطعا فرسودگی هم میاره و تو این زمینه میشه این کتاب رو هم بخونیم "فقر احمق می‌کند" ?در کل شما هیچوقت در فریلنسر نه درآمد ثابتی داری نه امنیت مالی پس مدیریت مالی خیلی مهمه!فریلنسر با درآمد دلاریکاملا درست و واقعی و شدنی هست و با توجه به شرایطی که داریم فریلنسری که درآمد دلاری داشته باشه می‌تونه پول مناسبی بدست بیارهاما برای کار تو پلتفرم های بین المللی قطعا شما مهارت های قابل قبولی باید داشته باشین و رقابت بین چند ده نفر، چندصدنفر نیست و رقابت شما با میلیون ها فریلنسر هست که آماده گرفتن پروژه هستن پس قطعا ابتدای کار خیلی می‌تونه سخت باشه که بتونین به درآمد دلخواه برسین اما شدنیه!هر پروژه ای دوست داری میگیریفرض کنیم شما بدلیل اینکه فکر میکنین باید پروژه هایی قبول کنین که به اصطلاح خودمونی "باهاش حال می‌کنید"، 3 ماه هست که هیچ پروژه ای دریافت نکردین و این باعث شده نه در زمینه مادی چیزی بدست بیارین و نه باعث شده نمونه کاری برای ارائه داشته باشینشما مجبوررررید برای گاها پروژه هایی رو قبول کنین که ممکنه ازشون متنفر باشین و این انتخاب ممکنه بدلیل کمبود پروژه هایی باشه که دریافت میکنین.پروژه علف هرز نیست از چپ و راست رشد کنه براتونهر کسی میتونه فریلنسر بشههرکسی می‌تونه فریلنسر بشه اما همه نمی‌تونن یک فریلنسر موفق بشن!مدیریت، کارمندی، شغل آزاد یا تریدر شدن و..... همه این شغل ها شخصیت های خاص خودشون رو دارن و باید سبک و استایل زندگیتون هم مطابق اون باشهاگر شما خودت رو خوب نمیتونی پرزنت کنی، اگر دیجیتال مارکتینگ خوبی نداری، اگر نمیتونی با آدمای زیادی شبکه سازی و تیم سازی کنیقطعا میتونی فریلنسر بشی اما اصلا نمیتونی یه فریلنسر موفق بشی چون نمیتونی پروژه بگیری!در نهایتفریلنسر هم مثل تمامی حرفه ها شرایط خودش رو داره و فریلنسرهای موفقی رو داریم که بهتره برای اینکه بتونیم فریلنسر موفقی باشیم پای حرفا و تجربه هاشون بشینیم و ازشون بخوایم تجربیات خودشون رو در اختیارمون بذارن و به جملات انگیزشی تکیه نکنیم. علی پالوانه علی پالوانه Sun, 02 Apr 2023 14:29:53 +0330 https://virgool.io/@alipalvane/version-packages-vjymhcfpnues سلام!توی پست قبلی راجب دو فایل package.json و package-lock.json صحبت کردیم ( اینجا بخون ) که چرا وقتی با پکیج های npm کار میکنیم برامون ایجاد میشن و خب خیلی راجب ورژن بندی پکیج ها بحث شد که قرار شد توی این پست به صورت کامل راجب منطق پشت ورژن بندی یا نسخه ها صحبت کنیم.خب با یه مثال شروع کنیم :ما قصد استفاده از کتابخونه jQuery رو داریم که یه کتابخونه معروف و قدیمی برای جاوا اسکریپت هستش و خب توی تصویر زیر آخرین ورژن این کتابخونه مشخص شدهورژن کتابخانه جی کوییریبه ورژن این کتابخونه دقت کنید که از یک عدد سه رقمی تشکیل شده که با استفاده از دات "." رقم ها از هم جدا شدن (اون V هم مخفف کلمه Version هستش)پس هر ورژن به صورت اعداد a.b.c وجود دارن که تو مثال بالا 3.6.3 هستش امااا این اعداد بی صاحب نیستن و هر بخش اسم خودشو داره که کافیه عکس زیر رو نگاه کنینعدد اول ما به major معروفه که به معنی عمده هستش و هربار توی یک پکیج یا نرم افزار این عدد تغییر کنه یعنی چی اتفاقی افتاده؟تغییر عدد majorوقتی این عدد تغییر میکنه یه عدد به a اضافه میشه یعنی همونجوری که از معنیش هم پیداست تغییرات عمده ای توی پکیجمون ایجاد شده بطوریکه دستورات این نسخه یا ورژن توی ورژن قبلی کار نمیکنن یعنی چی بازم؟ما از جی کوییری نسخه 3.6.3 استفاده میکنیم که یهویی جی کوییری میاد میگه آقااا ما نسخه 4 رو منتشر کردیم که حالا شده 4.0.0پس اگر شما کدهای جی کوییری رو با نسخه 3 زده باشین و یهو جی کوییری رو به نسخه 4 آپدیت کنین ممکنه سایتتون به مشکل بخوره و خیلی از دستورات کار نکنن پس مجبورین داکیومنت نسخه 4.0.0 رو خوب بخونین و اون تغییرات رو توی کدهای قدیمیتون اعمال کنین تا دوباره سایتتون نفسش برگرده ??عدد دوم که b هست بهش minor گفته میشه که به معنی جزئی هستش اما خب این عدد کی تغییر میکنه؟تغییر عدد minorهربار یه نسخه از یه نرم افزار یا پکیج منتشر بشه و هربار بهش یه سری ویژگی و امکانات جدید اضافه بشه این عدد یکی بیشتر میشهمثلا فکر کنین ما از نسخه 4.2.5 بوت استرپ استفاده میکنیم که یه کتابخونه برای CSS هستشتوی این نسخه، بوت استرپ ما برای رنگ های آبی و قرمز یه کلاس خاص دارهحالااااااااااا به این نتیجه میرسن که بیاین یه کلاس خاص هم برای رنگ های نارنجی و زرد درست کنیم و پکیجمون رو بهتر بکنیم اینجااااااست که بوت استرپ یه نسخه جدید منتشر میکنه که ورژن 4.2.5 ما تغییر میکنه به 4.3.5 حالا گرفتین؟ما همچنان میتونیم از نسخه قدیمی استفاده کنیم و هیچ مشکلی نداره اماااا اگر بوت استرپ رو آپدیت کنیم دستمون بازتره و میتونیم رنگ های نارنجی و زرد رو هم داشته باشیم اگرم استفاده نکنیم هم مشکلی پیش نمیاد و همچنان بوت استرپ ما مثل بنزی که صرفا رنگ نارنجی و زرد نداره کار میکنهعدد سومی c هستش که بهش میگن patch که به معنی وصله و تکه هست (فکر کنم بی ربطه??)تغییر عدد patchبیاین باز از مثال های خودمون استفاده کنیمنسخه 3.6.3 جی کوییری رو داریم استفاده میکنیم که میبینیم یه سری دستوراتش انگار درست کار نمیکنن یا تو سایت مشکل بوجود میارن...اینجاست که ما به باااااااگ خووووردیم? اما این باگ از دستورات ما نیست و متوجه میشیم که این باگ از سمت خود کتابخونه جی کوییریه پس حالا توسعه دهنده های جی کوییری هم سریع متوجه میشن و این باگ رو رفع میکنندقت کنین نه تغییر عمده داشتیم که major تغییر کنه نه ویژگی خاصی استفاده شده که minor تغییر کنهفقط باگ رفع شده که در این صورت نسخه جدید بعد رفع باگ منتشر میشه و یه عدد patch ما بیشتر میشه و حالا جی کوییری یه نسخه جدید منتشر میکنه که از 3.6.3 تبدیل شده به 3.6.4 ?جمع بندی1- هرنسخه از یک عدد سه رقمی تشکیل شده a.b.c2- اگر تغییرات خیلی عمده داشته باشیم بصورتی که نسخه جدید با نسخه قبلی کار نکنه عدد a تغییر میکنه که major هست3- اگر به همون نسخه ما فقط یک سری ویژگی اضافه بشه b یا minor تغییر میکنه4- اگر توی پکیجمون باگی رفع بشه c یا patch تغییر میکنه5- استفاده از این قانون الزامی نیست اما مرسومه6- هیچی وحی منزل نیست علی پالوانه علی پالوانه Mon, 06 Mar 2023 10:30:53 +0330 https://virgool.io/@alipalvane/packages-npm-lczbwhh3p64w به عنوان توسعه دهنده فرانت اند یا Frontend developer اگر از NPM استفاده کرده باشین حتما با این دو فایل روبرو شدین. اما اینا به چه کارمون میان و چرا بهشون نیاز داریم؟فایل Package.json چیه؟این فایل مرکز اصلی و قلب پروژه‌مونه که تمام وابستگی یا dependency هامون رو به همراه ورژن نصب شدشون رو میتونیم توش ببینیم (البته اجرای دستوراتمون مثل Command های پیشفرض هم توی این فایل تعریف میشن)فایل Package-lock.json چیه؟این همون فایلیه که تمام نسخه های نصب شده و وابستگی هایی که همراه با پکیج های نصب شده روی پروژه مون نصب شدن رو میتونیم توی این فایل ببینیم و به توسعه دهنده های دیگه هم کمک میکنه که برای همکاری توی پروژه تون تمام پکیج ها و وابستگی های این پکیج هارو ببینن.فکر کنم به همین اندازه ازشون بدونیم زیادی هم باشه ??حالا بیایم یکم توی این فایلا عمیق تر بشیم و نحوه عملکردشون رو بررسی کنیم...فرض کنید یه پروژه رو استارت زدین و برای نصب بسته ها از NPM استفاده کردین، اگر دیده باشین وقتی که NPM کارشو شروع میکنه به همراهش دوتا فایل هم تولید میشه که بحث امروزمونهبیاین یه پکیج رو با npm نصب کنیمnpm i bootstrapبعنوان نمونه ما پکیج بوت استرپ رو نصب میکنیمحالا توی مسیر پروژه دوتا فایل برامون ایجاد به همراه پوشه node_moduleتوسعه دهنده های دیگه برای استفاده از پروژه شما به دو چیز نیاز دارن:1- دقیقا همین فایل ها (package.json , package-lock.json)2- پکیج های نصب شده با ورژنی دقیقا مطابق فایل شماحالا میتونی تمام فایل های پروژه ات رو به همراه پوشه node_module یه فایل zip کنی و به همکارت یا کسی که کنارته تحویل بدیامااااااااااااااااااااااااا ⚠️داستان از اینجا شروع میشه که شما قراره این فایل هارو به شخصی دیگه ای تو یه مکان دیگه بدین و حجم پکیج های نصب شدتون هم به شدت زیاد و سنگینه خب ما چیکار باید بکنیم؟ ?خیلییی ساده کافیه تمام فایل های پروژه ات رو بجزززززز پوشه node_module یه فایل زیپ کنی و به اون شخص تو یه مکان دیگه بدین (البته اگه توی گیت هاب و گیت لب و .... کدهاتون رو قرار نمیدین)ایجوری میبینی که حجم فایل هات شاید 1 مگابایت یا کمتر بشه (مگه حجم اضافی رو عکس و مدیاهات بگیرن)قطعا اشتراک گذاری یه فایل 1 مگابایتی خیلی راحت تر از فایل 50 مگابایتی هستتنها کاری که اون شخص باید بکنه اینه که فایل هارو ازتون بگیره وتوی ترمینالش دستور npm رو بدهnpm installحالا اونم دقیقا همون پروژه شما با همون پکیج و ورژن هارو دارهاما node از کجا میدونست باید چه چیزایی رو نصب کنه؟؟؟ ?معلومه بخاطر وجود فایل های package.json , package-lock.jsonآیا به هر دو package.json و package-lock.json نیاز داریم؟جواب نه هست!قطعا با داشتن فقط فایل package.json هم امکان نصب هست اماااااا پس چه نیازی به package-lock.json داشتیم؟؟؟؟؟؟?برای درک این موضوع اول باید مفهوم علامت های ~ و ^ را بدانیم که توی فایل package.json قبل از شماره ورژن پکیج نصب شده قابل مشاهدسعلامت ^ یعنی قسمت patch و minor پکیج رو آپدیت کنعلامت ~ یعنی فقط قسمت patch پکیج آپدیت بشهتو مثال بالا ورژن پکیج بوت استرپ ما 5.2.3 هستش و قبلش علامت ^ اومدهاین اعداد چی رو نشون میدن ؟5 => major2 => minor3 => patchپس طبق علامت قبل ورژن توی بوت استرپ باید برای ما بعد از اپدیت پکیج فقط بخش ورژن 2.3 تغییر میکنه و 5 ثابته ( در ارتباط با این چیزا داکیومنت npm رو بخونید)تا همینجا دونستن هم برای درک این مطلب کافیه ?حالا بدون فایل package-lock به همکارتون بگین نصب رو شروع کنه، بدون هیچ مشکلی همه پکیج ها نصب میشن و یه فایل package-lock جدید هم براش ایجاد میشهاما مشکلی که داریم اینه که اگر فایل package.json شما توش ورژن پکیجی "5.2.3^" یا "5.2.3~" باشه وقتی همکارتون دستور npm install رو میدهتا وقتی که نسخه های نصبی پکیج شما بروز باشن هیچچچچ مشکلی برای همکارتون نیست چون برای اونم آخرین ورژن ها نصب میشناما اگر مثلا شما نسخه 5.2.3 پکیجی رو دارین کار میکنین و همکارتون از دستوراتی استفاده میکنه که توی نسخه 5.3.3 هست چی؟اینجاست که تداخل توی پروژه ها داریم و اون ویژگی اضافه شده توی پروژه شما کار نمیکنه چون شما ورژن قدیمی تری رو استفاده کردیندیگه اینجاست که باگ ها و تهدیدهای پروژه ممکنه خودشو نشوووون بدهاگر جزئیات پکیج های نصبی براتون مهم نباشه هم میتونین با همون فایل package.json کارخودتونو بکنیدحکم نهایی اینجاست ?اشتراک گذاری دوتا فایل package.json و package-lock.json از بروز همچین مشکلی جلوگیری میکنه و پروژه ها توی مسیر خودشون بدون هیچ مشکلی توسعه و بهبود پیدا میکننامیدوارم بدردتون خورده باشه سعی کردم خیلی ساده بگماگر بدردتون خورد لایکو فشار بده ♥️ علی پالوانه علی پالوانه Fri, 24 Feb 2023 12:50:33 +0330 https://virgool.io/@alipalvane/syndromes-programmer-z0iuhignqnwg امروزه میشه گفت که برنامه نویسی جز یکی از بهترین و پرطرفدارترین مشاغل دنیا محسوب میشه که البته امنیت شغلی خوبی هم با خودش به همراه داره چونکه دائما شرکت ها، سازمان ها و ... برای پیش بردن اهدافشون به این تخصص نیاز دارن.اما با این تعاریف دو حادثه در حال اتفاق افتادنه که اگر برنامه نویسی دچارش بشه ممکنه دیوونه بشه! ??یکی از این حادثه ها نوعی سندرم هست که به اون "سندرم ایمپاستر" یا "imposter syndrome" گفته میشه. توی این نوع سندرم برنامه نویس فکر میکنه همه از اون بهترن. کسی که دچار این سندرم شده همیشه فکر میکنه همکاراش یا بقیه برنامه نویس ها از اون باهوش تر، با استعدادتر و ماهرتر هستن و همیشه از این میترسه که بقیه فکر کنن اون هیچ چیزی بلد نیست و تمام کارهاش کپی و جعلی هست و تمام دستاوردهاش رو کم اهمیت میگیره ?نکته جالب اینجاست که اغلب زنان برنامه نویس اعتراف کردن که از سندرم ایمپاستر رنج می‌برن و این هم اصلا تعجب آور نیست. این سندرم در واقع اولین بار توسط دکتر پائولین رز کلنس و دکتر سوزان ایمز به عنوان یک مسئله خاص برای زنان موفق ثبت شد.(این دو بزرگوار روانشناس هستن!) و البته برای زنان کتاب هایی هم با همین موضوع برای اونا تهیه شده.البته خیلی از برنامه نویسای مرد هم که آمارشون رو به افزایش هم هست از این سندرم رنج می‌برن و دچارش شدن.افرادی که دچار سندرم ایمپاستر هستن سعی میکنن همیشه برای خودشون استانداردهایی بالایی در نظر بگیرن که ممکنه منجر به کمال گرایی بشه و خود کمال گرایی هم مشکلی هست که سخت میشه ازش رهایی پیدا کرد.البته بجز برنامه نویسی این سندرم در شغل هایی که نیاز به بررسی و نظارت دارن رایج هست یعنی جاهایی کار کنین که کار و عملکرد شما باید بررسی بشه.برنامه نویس ها هم بیشتر دچار این سندرم میشن چونکه دائما کدها و برنامه هایی که نوشتن از طرف بقیه باید بررسی بشن و نظر دریافت کنن.هجرت از "ایمپاستر" به "Real Programmer"تله سندرم ایمپاستر اینه که برنامه نویس فکر میکنه برای اینکه بهتر و بهتر بشه باید خیلی تمرین کنه و وقت خودشو صرف انجام پروژه های مختلف میکنه و خب زمان فرد رو میگیره و گاها باعث کم خوابی میشه که شب و روز در حال آموزش دیدن یا پروژه زدن باشه که این اختلال منجر به سندرم "Real Programmer" می‌شه.این سندرم چند سال پیش توسط برنامه نویسی مطرح شد که معتقد بود برنامه نویس خوب برنامه نویسیه که شب و روز رو کار کنه و ساعت براش معنی نداشته باشه و کار و تفریح و زندگیش برنامه نویسی باشه البته این نظریه موافق و مخالف زیادی داره که در نهایت با تحقیقاتی که دانشگاه استنفورد آمریکا انجام داد به این نتیجه رسیدن که کار زیاد به سود برنامه نویس نیست.البته اینکه برنامه نویس ها ممکنه تا ساعت‌های طولانی کار کنن چیز تازه ای نیست. اما اینکه برای لذت و تفریح همچین کاری کنن تا یک برنامه نویس واقعی یا Real Programmer نشون داده بشن حقیقتا جدیده.نظریه کلی اینه که شما با کار در ساعات عادی و کاری خودتون هم میتونین یک برنامه نویس خوب بشین هرچند برنامه نویسان برتر در ساعاتی غیر از ساعات کار خودشون هم کار میکنن.بیشتر همیشه بهتر نیست دانشجویان دانشگاه استنفورد با تحقیق روی برنامه نویس ها متوجه شدن که کار زیاد بهره وری فرد رو کم میکنه و برنامه نویسی که 60 ساعت در هفته کار میکنه نسبت به برنامه نویسی که 40 ساعت در هفته کار میکنه کدهایی با کیفیت پایین تر مینویسه.البته این تحقیقات و نتایج هم باعث کمتر شدن این سندرم نشدن و متاسفانه رو به افزایش هست.خلاصه مطلبسندرم ایمپاستر رو کسی دچارش شده که دائما فکر میکنه بقیه از اون بهتر، باهوش تر و با استعدادترن.سندرم Real Programmer رو کسی داره که فکر میکنه باید زمان خیلی زیادی رو تمرین و کار کنه تا یه برنامه نویس واقعی بشه.هر دو قابل درمانن و امیدوارم دچارشون نشیم!?این مطلب از منابع خارجی گرفته، ترجمه و خلاصه شد. علی پالوانه علی پالوانه Sun, 12 Feb 2023 11:11:57 +0330 https://virgool.io/@alipalvane/covert-arrobj-to-singleobj-hn09uyn0hvrf آرایه چیه؟آرایه ها یک متغیر مخصوص هستن که میتونن چندین مقدار رو توی خودشون ذخیره کنن و به شما لیستی از آیتم‌های ذخیره شده رو بده.ساختارش به چه شکله ؟const array = [ '?' , '?' , '?' ];آبجکت چیه ؟آبجکت ها هم لیستی از داده‌ها رو به ما میدن که به صورت جفت‌های key:value ذخیره میشن که key یه اسم و value هم یه مقدار برای اسم ماست.ساختارش به چه شکله ؟const object = { name: 'pride', type:'car', price:1000000000, }خب تعریف اضافه کافیه بریم سراغ کار خودمون ?اگه یه آرایه داشته باشیم که توش کلی آبجکت باشه! چطوری می‌تونیم اون آرایه با آبجکت های داخلش رو به یک آبجکت واحد تبدیل کنیم؟سریعترین راه با استفاده از متد ()Object.assign به همراه سپرید اپراتورها یا سه نقطه خودمون (...) دقت کنید ها برای ()Object.assign از O بزرگ استفاده بشه و این ویژگی توی ES6 اضافه شدهاین متد رو هرجا استفاده کنیم از شی منبع یه کپی میگیره و توی یه شی جدید به ما برمیگردونهحالا بریم توضحیات رو توی کد ببینیم ?//define our array with many objects const fruits = [{ apple: '?' }, { banana: '?' }, { cherry: '?' }]; //convert array of objects to single object const allFruits = Object.assign({}, ...fruits); //show our result console.log(allFruits); //output : { cherry: '?', banana: '?', apple: '?' }⚠️ نکته ای که نباید فراموش کنید اینه که اگر بیش از یک آبجکت با properties یکسان داشته باشین (چندتا آبجکتت پراپرتی یکی داشته باشن) آخرین مقدار جایگزین میشه و فقط آخرین آبجکت نشون داده میشه.بریم مثالش رو ببینیم تا راحت تر منتقل بشه (به دوتا سیب توجه کنید توی آرایه) ?//define our array const fruits = [{ apple: '?' }, { banana: '?' }, { cherry: '?' }, { apple: '?' }]; //convert array of objects to object const allFruits = Object.assign({}, ...fruits); //show our result console.log(allFruits); //output : { apple: '?', banana: '?', cherry: '?' };توی مثال با سیب قرمز توی یه آبجکت با property به اسم apple داشتیم و توی آخرین آبجکت هم یه سیب سبز بازم با همون property دقیقا apple داشتیم و توی خروجی فقط آخرین سیب رو برای ما جایگزین کرد. علی پالوانه علی پالوانه Wed, 01 Feb 2023 23:07:01 +0330 https://virgool.io/@alipalvane/1000-free-certificates-dw1zfccvx5yy خب هرکسی که توی حوزه برنامه نویسی، دیجیتال مارکتینگ، سئو، رابط کاربری، تجربه کاربری و ... فعالیت میکنه نیاز به مطالعه و آموزش مداوم داره! خب چی بهتر از اینکه دیدن این آموزش ها با مدرک هم همراه باشه ?مشکلی که ما ایرانی‌ها درگیرش هستیم دروه‌های پولی سایت‌هایی مثل coursera , udemy هستش که متاسفانه نمی‌تونیم بدلیل مشکلاتی که هممون میدونیم ازشون خرید کنیمحالا توی این پست قصد دارم دروه‌های رایگان همراه با مدرک رو براتون قرار بدم تا هرکدوم که براتون قابل استفاده هستش رو شرکت کنین و مدرکشون رو به رزومه یا پروفایل لینکدینتون اضافه کنید که خب این کار باعث میشه رزومه شما هم پربار تر نشون داده بشه ?‍??‍?گواهینامه های رایگان FreecodecampResponsive Web DesignJavaScript Algorithms and Data StructuresFront End Development LibrariesBack End Development and APIsMachine Learning with Pythonگواهینامه های رایگان GoogleGoogle Analytics for BeginnersGoogle Analytics for Power UsersGoogle Cloud Essentialsگواهینامه‌های رایگان هاروارد Harvard ( الحق دهن پر کنه ? )CS50s Computer Science for Business ProfessionalsCS50s Introduction to Artificial Intelligence with PythonCS50s Web Programming with Python and JavaScriptCS50s Introduction to Programming with PythonCS50s Introduction to Game DevelopmentCS50s Introduction to Programming with Scratchگواهینامه‌های ماکروسافتCreate and use analytics reports with Power BIAZ-104: Configure and manage virtual networks for Azure administratorsGetting Started with Microsoft PowerShellMicrosoft Azure AI Fundamentalsگواهینامه‌های رایگان دانشگاه Helsinki قبلش وقتتو بگیرم ⏱️دانشگاه هلسینکی بزرگترین دانشگاه و یکی از اصلی‌ترین دانشگاه‌های فنلانده! باید بگم اندازه یه استادیوم یعنی 67هزار دانشجو داره و تو فهرست برترین دانشگاه‌های جهان هم حضور داره!حالا بریم برای دوره‌های خفنش Elements of AIFull Stack open 2022Java ProgrammingDevOps with KubernetesDevOps with Dockerگواهینامه‌های رایگان MongoDBمونگو دی‌بی یه پایگاه داده هستش که برنامه نویسا در توسعه وب و اپلیکیشن ازش استفاده میکنن. این پایگاه داده مبتنی بر NoSQL هستش که اگه توسعه دهنده هستین حتما به گوشتون خورده اگرم MERN Stack هستین که آش کشک خالس در هر صورت بیخ ریشتهخب حالا ایشونم دوره برگزار میکنه و مدرک هم بهت میده MongoDB for Java DevelopersMongoDB for Javascript DevelopersMongoDB BasicsMongoDB for .NET Developersگواهینامه‌های رایگان IBM (ایشالا همگی همینجا استخدام شیم ??)Using R with DatabasesData Visualization with RMathematical Optimization for Business Problemsدیگه بیشتر از این حوصلتون رو سر نمی‌برم اما باقی سایت‌هایی که در کنار آموزش‌های رایگانشون بهتون مدرک میدن رو براتون لیست میکنمدوره‌های HackerRankدوره‌های DataCampدوره‌های Great Learningراستی مدرک گرا نباشیممفاهیم رو عمیق یاد بگیریمراستی " قهوه مارو برنامه‌نویس نمیکنه ?" علی پالوانه علی پالوانه Sun, 22 Jan 2023 10:44:49 +0330