https://virgool.io/feed/@mohstarsos1 هر کار و پیشه ای که داری آن را به گونه ای انجام بده که گویی تا ابد زنده هستی و بابت کرده ات پاسخگو fa 2026-06-16 18:18:54 https://files.virgool.io/upload/users/44716/avatar/RAm8IA.png?height=120&width=120 https://virgool.io/@mohstarsos1 https://virgool.io/mobit-eng/%D8%B4%D8%A8%DB%8C%D9%87-%D8%B3%D8%A7%D8%B2%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%DA%A9%D9%84%DB%8C%D8%AF-%D8%A7%D9%86%D8%AF%D8%B1%D9%88%DB%8C%D8%AF-%D8%AF%D8%B1-developer-tools-%DA%A9%D8%B1%D9%88%D9%85-wqbapyiw770c بی شک یکی از بزرگترین و مهمترین معضلات برنامه نویسان فرانت اند کار هنگام پیاده سازی پروژه به صورت ریسپانسیو و یا PWA، نبود صفحه کلید اندروید در محیط Developer Tools مرورگر گوگل کروم می باشد.معمولا اولین اقداماتی که برای این منظور انجام می شود، انتقال پروژه به صورت Build گرفته شده بر روی موبایل از طریق بستر شبکه می باشد. همچنین آن دسته از عزیزانی که کمی بیشتر حوصله و وقت گذاشته و از منابع سخت افزاری محدود سیستمشان بیمی ندارند، اقدام به نصب Emulatorهای اندروید می کنند.اما از آنجایی که کمپانی گوگل همیشه در حال توسعه تکنولوژی هایش است، راهکاری تا حدودی قابل قبول برای فرانت اند کاران عزیز در نظر گرفته که میتوان به کمک آن فضای برگرفته شده صفحه کلید بر روی پروژه را مشخص کرد و آن را شبیه سازی نمود. در ادامه به شرح آن می پردازیم.ابتدا همانند تصویر زیر پس از باز کردن Developer Tools و قرار دادن آن بر روی حالت نمایش موبایل، مطابق تصویر زیر از کشوی انتخاب نوع دستگاه، گزینه Edit را انتخاب کنید.در مرحله بعدی از پنجره باز شده گزینه Nexus 5X را تیک زده و پنجره را ببندید.و در نهایت مطابق تصویر زیر، بر روی آیکن بالای صفحه(orientation)، گزینه Portrait - Keyboard را انتخاب کرده و فضای شبیه سازی شده صفحه کلید اندروید را بر روی صفحه جاری از پروژه خود ملاحظه فرمایید.امیدوارم راه حل مفیدی برای برنامه نویسان عزیز ارائه داده باشم.شاد و سرافراز، در پناه حق باشید. Mohammad Ghasemi Mohammad Ghasemi Thu, 13 Aug 2020 16:25:15 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D9%BE%D9%86%D8%AC%D8%A7%D9%87-%D9%88-%D8%AF%D9%88%D9%85-%D8%AA%D8%A7-%D9%87%D9%81%D8%AA%D8%A7%D8%AF-%D9%88-%DB%8C%DA%A9%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-nrcrv0ai6rkj درود بر شما خواننده محترم و عزیز،حدود سه هفته از آخرین پست چالش میگذره و من همچنان در حال انجام چالش و دست و پنجه نرم کردن با خطوطی که یه جورایی قسمتی از زندگی که نمیشه گفت، قسمتی از وجودم شدن!هر از گاهی شب ها در خواب هم کد میزنم و گاهی پشت چراغ قرمز در ذهنم مشغول رفع خطاهای منطقی این کد ها هستم و البته دوش حمام به هنگام استحمام هم از این قاعده مستثنی نیست.برگردیم سر اصل ماجرا و چالش عزیز و پر هیجان صد روز کد زدن. همانطور که می دانید من طبق روال پیش میرفتم و طبق قوانین چالش مذکور به طور روزانه فعالیتی رو که روز قبل انجام داده بودم در ویرگول ثبت می کردم. تا اینکه وقت محدود برای نگارش مطالب به طور روزانه، اجرای همزمان چندین پروژه نرم افزاری، کار کردن در بخش دولتی، مدیریت همه این فعالیت ها و صد البته از همه مهمتر فیدبک های شما اساتید بزرگوار مبنی بر عدم نیاز نگارش و پست روزانه فعالیت (کور از خدا چی میخواد؟ دو چشم بینا) باعث شد تا پست ها رو با هم ادغام کنم و اونها رو یکجا روی ویرگول قرار بدم.در این مدت بخش فرانت اند یک پروژه PWA به طور کامل بازنگری و ایجاد شد. این کار مستلزم انجام روزی حداقل 10 ساعت کد زدن بود که تا امروز میشه چیزی حدود 190 ساعت. خودش یه پا چالش 190 روزه کد زدن هست :-)تا گزارش کاری دیگر، در پناه حق، شاد و سر افراز باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Mon, 02 Sep 2019 07:41:42 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D9%BE%D9%86%D8%AC%D8%A7%D9%87-%D9%88-%DB%8C%DA%A9%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-local-storage-bbpyjnz2nz7w درود بر شما خواننده محترم،زمانی که شروع به یادگیری جاوا اسکریپت میکنید، ممکنه ساخت یک اپلیکیشن to-do اولین کاری باشه که شما انجام میدین اما پس از رفرش کردن صفحه، میبینید تمام مواردی که در لیست to-do خودتون وارد کرده بودین کاملا ناپدید شدن. با استفاده از Local Storage میتونیم این مشکلات رو به راحتی برطرف کنیم.در واقع Local storage بخشی از web storage می باشد, که این سیستم بخشی از توانایی های های زبان HTML5 است. دو راه حل وجود دارد که شما بتوانید اطلاعات را بر روی کامپیوتر کاربر ذخیره نمایید.اول - Local storage: ذخیره سازی اطلاعات بدون در نظر گرفتن تاریخ انقضاء و هر زمانی که بخواهید میتوانید از آن استفاده نمایید, چرا که با لود شدن صفحه وب سایت در مرورگر کاربر میتوانید در همان زمان به اطلاعات ذخیره شده دسترسی پیدا نمایید.دوم - Session Storage: تنها میتواند اطلاعات را در همان موقع و یا اصطلاحا session ذخیره نمایند. بنابراین زمانی که کاربر مرورگر خود را ببندد تمامی اطلاعات از دست خواهند رفت.از نگاه ساده و کاملا مشخص باید بگوییم که تمامی اطلاعاتی که در وب ذخیره میشوند و تحت نام web storage شناخته میشوند از جفت هایkey/value تشکیل شده اند و بر خلاف فایل های کوکی, این اطلاعات میتوانند در کامپیوتر کاربر همواره دائما وجود داشته باشند, حتی اگر کاربر مرورگر خود را ببندد و یا کامپیوتر خود را خاموش نماید.خب همانطور که مشاهده کردید روز پنجاه و یکم من هم به کار با لوکال استوریج ها گذشت و بسیار تجربه مفید و لذت بخشی بود.تا درودی دیگر بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Wed, 14 Aug 2019 09:21:52 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%DA%86%D9%87%D9%84-%D9%88-%DA%86%D9%87%D8%A7%D8%B1%D9%85-%D8%AA%D8%A7-%D9%BE%D9%86%D8%AC%D8%A7%D9%87%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-uhltqfrk4pmr درود بر شما عزیزان گرامی، در همین ابتدای کار امیدوارم عذرخواهی بنده رو پذیرا باشید،‌ چرا که گزارش های روزانه چالش صد روز کد زدن رو پست نکردم. اما خدمت با سعادت تک تک شما خوانندگان عزیز عارض بشم، در هفته ای که گذشت در مجموع ۲۸ ساعت خواب شبانه داشتم. بسیار هفته پر مشغله ای بود و واقعا حجم بسیار زیاد کارها مجال گزارش نویسی نمی‌داد.اما مساله جالب اینکه در طول این هفت روز تمامی کدهایی که زدم و تجربیاتی که بدست آوردم رو میتونم جزو چالش حساب کنم، چرا که برام تازگی داشتن و ازشون کلی چیز یاد گرفتم. فقط با این تفاوت که در چالش موظف به روزی یک ساعت کد زدن هستیم و توی این ۷ روز حدودا ۱۰۰ ساعت کد زدم ;-)موضوع کد طراحی و پیاده سازی یک اپلیکیشن پیش رونده (PWA) بود که با Reactjs و رابط کاربری محبوب گوگل (Material Design) پیاده سازی شد. تعداد صفحات زیاد و مدت زمان کم تا تحویل پروژه باعث شد تا روزانه حدود ۱۴ ساعت مشغول کد زدن باشم.انشاالله در پستی جداگانه تجربیاتی که در طول پیاده سازی این اپلیکیشن بدست آوردم رو براتون می نویسم. همچنین از فردا با قدرتی دو چندان به روال طبیعی گزارش نویسی بر می‌گردم و با کمک ویرگول عزیز در خدمت شما عزیزان خواهم بود.ایام به کام، حق نگهدارتون. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Mon, 12 Aug 2019 10:13:26 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%DA%86%D9%87%D9%84-%D9%88-%D8%B3%D9%88%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-momentjs-ppi2acg4cyej درود بر شما، پست امروز رو در خدمتتون هستم با فعالیت چهل و سومین روز از چالش صد روز کد زدن، که به کار با کتابخانه Moment.js گذشت.کتابخانه Moment.js یک کتابخانه JavaScript  است. این کتابخانه وظیفه‌ی تحلیل، اعتبارسنجی، مدیریت و نمایش تاریخ و زمان در جاوا اسکریپت را بر عهده دارد. از ویژگی‌های مهم این کتابخانه، سازگاری با محیط‌های گوناگون از جمله Node.js  و همچنین انواع مرورگرهای متداول به شمار می‌رود. این کتابخانه با IE8 و IE9 سازگار است و همچنین با Chrome  و Safari 10.8 بر روی سیستم عامل Mac سازگار است. اگرچه شئ Date در جاوا اسکریپت ویژگی‌های متنوعی برای کارکردن با تاریخ و زمان در اختیار برنامه‌نویسان قرار می‌دهد، ولی توسعه‌ی نرم‌افزارهای تحت وب تنها با استفاده از این ویژگی‌ها گاهی مشکل و ناهموار به نظر می‌رسد. این کتابخانه برای مدیریت تاریخ و زمان از تابع moment() استفاده کرده و برای رفع مشکل های مذکور به کمک ما میاد.تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Mon, 05 Aug 2019 13:19:53 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%DA%86%D9%87%D9%84-%D9%88-%D8%AF%D9%88%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-refactoring-vv8wicyyqpwx درود بر شما خواننده گرامی، بسیار خوشحالم که پس از گذشت چهل و دو روز از چالش شیرین، جذاب، مهیج و آموزشی صد روز کد زدن، شما خوانندگان عزیز و محترم رو در کنار خودم دارم.موضوع انتخابی روز چهل و دوم کمی متفاوت است! چرا که بیشتر بر روی کیفیت کد تمرکز دارد تا بر روی تکنولوژی مورد استفاده در کد. اگر کیفیت کدها رو بررسی ‌کنید به یک نتیجه‌ی کلی خواهید رسید: عموم برنامه نویس‌های ایرانی (حداقل برنامه نویس هایی که چند عدد کار سورس باز به اشتراک گذاشته‌اند) با مفهومی به نام Refactoring هیچگونه آشنایی ندارند. به عنوان مثال یک برنامه‌ی WinForm تهیه کرده‌اند و کل سورس برنامه همان چند عدد فرم برنامه است و هر فرم بالای 3000 سطر کد دارد. دوستان عزیز! به این می‌گویند «فاجعه‌ای به نام کدنویسی کثیف!» صاحب اول و آخر این نوع کدها خودتان هستید! شاید به همین جهت باشد که عمده‌ی پروژه‌های سورس باز پس از اینکه برنامه نویس اصلی از توسعه‌ی آن دست می‌کشد، «می‌میرند». چون کسی جرات نمی‌کند به این کدها دست بزند. مشخص نیست الان این قسمت را که تغییر دادم، کجای برنامه به هم ریخت. تستی ندارند. ساختاری را نمی‌توان از آن‌ها دریافت. منطق قسمت‌های مختلف برنامه از هم جدا نشده است. برنامه یک فرم است با چند هزار سطر کد در یک فایل! کار شما شبیه به کد اسمبلی چند هزار سطری حاصل از Decompile یک برنامه که نباید باشد!بازسازی کد یا Code Refactoring چیست؟Refactoring به معنای بهبود پیوسته کیفیت کدهای نوشته شده در طی زمان است؛ بدون ایجاد تغییری در عملکرد اصلی برنامه. به این ترتیب که در پایان هر ریفکتورینگ به کدهایی دست خواهیم یافت که قابلیت آزمون پذیری بهتری داشته، در مقابل تغییرات مقاوم و شکننده نیستند و همچنین امکان به اشتراک گذاری قسمت‌هایی از آن‌ها در پروژه‌های دیگر نیز میسر می‌شود.به‌طور کلی بازسازی کد دارای دو فایده است.نگهداشت‌پذیری. با انجام بازسازی کد، رفع مشکل در کد آسان‌تر انجام می‌شود زیرا خوانایی کد بیشتر است و هدف نویسندۀ کد راحت‌تر فهمیده می‌شود.توسعه‌پذیری. امکان گسترش دادن توانایی‌های برنامه بیشتر می‌شود درصورتی که کد از الگوهای طراحیِ قابل تشخیص استفاده کند و قابلیت انعطاف‌پذیری داشته باشد.اگر گشت و گذاری در اینترنت داشته باشید، کتاب ها و مقالات بسیار زیادی در خصوص Refactoring منتشر شده که به عنوان یک برنامه نویس خوب، حتما مطالعه آنها را در اولویت قرار دهید.حق نگهدارتان. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy منبع Mohammad Ghasemi Mohammad Ghasemi Sun, 04 Aug 2019 09:50:02 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%DA%86%D9%87%D9%84%D9%85-%D9%88-%DA%86%D9%87%D9%84-%D9%88-%DB%8C%DA%A9%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-d3js-lcjcu444yi50 درود خدمت یکایک شما عزیزان،روزهای چهلم و چهل و یکم از چالش صد روز کد زدن، برای من بسیار شیرین و لذتبخش بود. چرا که بر روی کتابخانه ای قدرتمند و دارای امکاناتی بی نظیر برای طراحی چارت، کار می کردم. به جرات می توان گفت با وجود امکانات این کتابخانه جاوا اسکریپت، تنها ذهن شما محدودیتی برای تعریف چارت، می باشد.خانم ها، آقایان معرفی می کنم : D3 به گفته ویکی پدیا D3.js (مخفف Data-Driven Documents) یک کتاب‌خانهٔ JavaScript برای تولید مصورسازهای دادهٔ پویا و تعاملی در مرورگرهای وب هست. این کتابخانه از استانداردهای SVG, HTML5 و CSS که به صورت گسترده پیاده‌سازی شده‌اند استفاده می‌کند و جانشین فریم‌ورک قبلی یعنی Protovis می‌باشد. برخلاف خیلی از کتابخانه‌های دیگر، D3.js کنترل فراوانی را برای نتیجهٔ بصری نهایی فراهم می‌آورد. توسعه آن در سال ۲۰۱۱ میلادی انجام شد، هنگامی که نسخهٔ ۲٫۰٫۰ در ماه اوت ۲۰۱۱ منتشر شده‌بود.کمپانی مصورسازی دادهٔ Datameer به صورت رسمی از D3.js در هستهٔ تلکنولوژی خود استفاده می‌کند، در حالی که The New York Times، گاهی اوقات برای نمودارهای غنی از آن استفاده می‌کند. این کتاب‌خانه توسط ویراستار iD برای ویرایش OpenStreetMap مورد استفاده قرار گرفته‌است. D3.js به صورت گسترده برای GIS map making، مدیریت GeoJSON و Topojson به عنوان فایل‌های ورودی مورد استفاده قرار گرفته‌است.توصیه می کنم حتما از طریق این لینک از مثال ها و نمونه های D3 دیدن کنید.حق نگهدارتان. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sat, 03 Aug 2019 09:59:56 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D9%86%D9%87%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-lodash-rgsn8kficlem درود بر شما خواننده گرامی،بی شک اگر برنامه نویس جاوا اسکریپت باشید باید با کتابخانه پر قدرت Lodash آشنایی داشته باشید. روز سی و نهم من هم با کار کردن با این کتابخانه گذشت.اجازه بدید برای معرفی این کتابخنه اول بریم سراغ معرفی Underscore:در سال 2009، جرمی اشکناس (Jeremy Ashkenas) کتابخانه Underscore را ایجاد کرد. Underscore یک کتابخانه ابزار است که بیش از 100 تابع را پوشش می‌د‌هد. این توابع به شما کمک می‌کنند تا آرایه‌ها، اشیاء و سایر توابع را در جهت نیازهایتان دستکاری کنید.یکی از قوی‌ترین ویژگی‌های Underscore کمک‌های برنامه‌نویسی کاربردی آن است. به‌عنوان‌مثال، نقشه (map)، فیلتر (filter) و کاهش (reduce)، برخی از محبوب‌ترین کمک‌ها به شمار می‌روند. برنامه‌نویسی کاربردی (Functional Programming, FP) یک پارامتر برنامه‌نویسی است که از تغییر وضعیت و تغییر ‌داده‌ها جلوگیری می‌کند. در چند سال اخیر، FP بسیار محبوب‌ شده است.در سال 2012، Lodash اولین نسخه خود را منتشر کرد. جان دیوید دالتون (John-David Dalton) این کتابخانه را جهت ایجاد یک تکرار سازگارتر برای محیط آرایه‌ها (arrays)، رشته‌ها (strings) و شیء توکار (argument objects) نوشت.در این فرایند، Lodash با توجه به‌ویژگی‌های بیشتر و مستند‌سازی بهتر، به یک زیرمجموعه از Underscore تبدیل‌شده است. امروزه بسیاری از توسعه‌دهندگان از Underscore به Lodash مهاجرت کردند.این نگرانی وجود دارد که شاید Lodash دیگر به‌ عنوان یک جاوا اسکریپت تکامل‌یافته مورد‌ نیاز نیست. باید به شما بگویم، جاوا اسکریپت روزبه‌روز تکامل می‌یابد و نسخه‌های جدید شامل برخی از ابزارهای مفید هستند که برای استفاده از این ابزارها شما فقط می‌توانید از کتابخانه‌های خارجی مانند Lodash و Underscore استفاده کنید. با این‌ وجود، Lodash و Underscore کتابخانه‌هایی عالی، به‌خصوص برای هر برنامه FP می باشند. تا درود دیگر، در پناه حق باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Wed, 31 Jul 2019 12:12:25 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D9%87%D8%B4%D8%AA%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-react-router-vnwyswu2kssg درود بر شما دوست عزیز، اجازه بدید بی مقدمه بریم سر اصل مطلب! ;-) در سی و هشتمین روز از چالش مهیج و جذاب صد روز کد زدن، رفتم سراغ کتابخانه قدرتمند React Router.همونطور که میدونین Routing یا مسیردهی یکی از مهمترین مواردی هست که تقریبا همه اپلیکیشن ها از اون استفاده میکنند و با استفاده از اون به کاربران اجازه میدن که بین صفحات مختلف Navigate کنند و جابجا بشن. هر چه اپلیکیشن بزرگتر میشه، تنظیمات مربوط به Routing هم پیچیده‌تر میشه و میتونه از یک Route ساده به یک Route تو در تو و چند‌ سطحی تبدیل بشه.معروف‌ترین و متداول‌ترین کتابخانه‌ای که در برنامه‌های React برای Routing مورد استفاده قرار میگیره، React Router است. با استفاده از React-Router به راحتی میتونین بین view ها جابجا بشید و بین اونا transition تعریف کنید و به راحتی به اطلاعات URL دسترسی داشته باشید.قبل از نسخه 4 مربوط به کتابخانه React-Router باید همه مسیرها رو قبل از رندر شدن صفحه و در زمان initialize شدن اپلیکیشن، در یک فایل مشخص تعریف میکردیم. با استفاده از React-Router 4 میتونین مسیرها رو بصورت declarative یا تعریفی مشخص کنید. React-Router بصورت component در دسترس شما قرار داده شده و به راحتی میتونین از اون در برنامه‌های React استفاده کنید.تا درودی دیگر، حق نگهدارتان. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy منبع Mohammad Ghasemi Mohammad Ghasemi Tue, 30 Jul 2019 07:12:05 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D8%B4%D8%B4%D9%85-%D9%88-%D9%87%D9%81%D8%AA%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-wordpress-blqivh2eexhm درود بر شما خواننده گرامی و عزیز، امیدوارم در این روزهای گرم یا بهتر بگم داغ تابستان، حالتون خوب و خوش باشه و زندگیتون پر از برکت. در طی دو روز گذشته (روزهای سی و ششم و سی و هفتم از چالش) توفیق اجباری شد پروژه ای رو با یکی از محبوب ترین CMSهای جهان یعنی WordPress بالا بیارم و یاد و خاطره برنامه نویسی وب رو که چند سال پیش کار می کردم مجددا در ذهنم زنده کنم.وردپرس یک سیستم مدیریت محتوا (Content Management System) برای راه اندازی و ایجاد سایت‌ها و وبلاگ‌ها است. این سیستم در ابتدا تنها یک سرویس رایگان وبلاگ‌نویسی بود که امکانات خوبی را در اختیار وبلاگ نویسان قرار می‌داد و سپس به صورت یک سامانه مدیریت محتوا یا نرم‌افزار متن باز برای مدیریت محتوای سایت‌ها معرفی شد.وردپرس با زبان برنامه‌نویسی پی اچ پی (PHP) نوشته شده و توسط مای‌اس‌کیوال (MySQL) پشتیبانی می‌شود. همچنین نسخه‌ای برای پست‌گرس‌کیوال نیز موجود می‌باشد این سیستم کاملاً رایگان و متن باز است. وردپرس در ادامه راه پروژهٔ موفق b2 است که در سال ۲۰۰۳ شکل گرفت. نام وردپرس را کریستیان اِسلِک، دوست مت مولنوگ (توسعه‌دهندهٔ اصلی وردپرس) پیش نهاد و از آن روز وردپرس با سرعت و پیشرفتی قابل ملاحظه تبدیل به معروف‌ترین و پرکاربردترین ابزار ساخت وبلاگ و سایت بر روی هاست شده‌ است.در حال حاضر بیش از ۷۶ میلیون وب سایت در سراسر جهان با این CMS راه اندازی شده‌ است. قالب‌ها، تم‌ها و افزونه‌های آماده‌ای به صورت تجاری یا رایگان برای کار کردن با این ابزار ارائه شده‌ است که با استفاده از آن برخی کارهای متداول را آسانتر و در زمان کمتری می‌توان پیاده‌سازی کرد. به عنوان مثال برای راه اندازی یک فروشگاه اینترنتی در کنار سایت وردپرسی کافیست یکی از افزونه‌هایی که برای این منظور طراحی شده‌اند را به هسته وردپرس اضافه کرد. به عنوان مثال افزونه‌های WooCommerce و EDD دو افزونه هستند که برای راه اندازی فروشگاه اینترنتی جهت فروش کالای فیزیکی یا فایل‌های دانلودی استفاده می‌شوند. همچنین قابلیت تبدیل شدن سایت به یک شبکه اجتماعی با افزونه قدرتمند Buddypress یا ایجاد یک تالار گفتگو یا انجمن با افزونه BBpress، وجود دارد. با توجه به فراوانی و تنوع افزونه‌ها تقریباً هر امکانی را می‌توان به سایت وردپرسی اضافه کرد. تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Mon, 29 Jul 2019 08:10:38 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D9%BE%D9%86%D8%AC%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-material-ui-jlna1wdmblpq درود بر شما خواننده عزیز و گرامی،نخست باید عنوان کنم از اینکه وقت گرانبهاتون رو صرف خواندن مطالب اینجانب می کنید، مطالبی که عمدتا گزارش کار شرکت در چالش ۱۰۰ روز کد زدن می باشد، از صمیم قلب سپاسگزارم و امیدوارم توانسته باشم در کنار رسیدن به هدفی که برای خودم تعریف کردم، شما نیز از مطالب بهره کافی رو ببرید.در سی و پنجمین روز از چالش، به منظور ایجاد ظاهر گرافیکی یکی از پروژه های موبایل (PWA)، رفتم سراغ کامپوننت های رابط کاربری متریال (Material User Interface = Material UI). برای اینکه مفهوم رو بهتر متوجه بشیم باید ابتدا سراغ متریال دیزاین (Material Design) بریم.متریال دیزاین سبکی جدید در طراحی است که گوگل در یکی از کنفرانس های خبری خود در ماه ژوئن سال ۲۰۱۴ آن را معرفی کرده است.متریال دیزاین بیش از حد به سیستم گرید و انیمشین‌ها اهمیت می‌دهد و عمق و سایه‌ها برای المان‌های طراحی شده بسیار مهم است. شاید بتوان گفت ورژن بروز شده طراحی تخت (Flat Design) باشد اما خیلی زیباتر با انیمییشن‌ها و  Transition های بسیار زیبا و در عین حال پیچیده. خود گوگل ادعا دارد که زبان جدید طراحی آنها، الهام گرفته از مرکب و کاغذ است. یکی از طراحان مشهور جهان به نام Matias Durate میگوید همانگونه که اجسام در دنیای واقعی قابل حس هستند و طول و عرض و ارتفاع دارند در این نوع طراحی دیجیتال هم باید همین حس‌ها را منتقل کرد.اگر بخواهیم در یک جمله بگوییم متریال دیزاین چیست. می‌توانیم بگویم متریال دیزاین نسخه مکتوب، مستند و علمی طراحی تخت (Flat Design) هست. در ابتدا این نوع طراحی محدود به اپلیکیشن‌های موبایلی بود که برای اندروید فراهم شده‌اند و استفاده از آن در محیط وب کمی نامفهوم بود، ولی متریال دیزاین خیلی سریع جای خود را بین طراحان رابط کاربری وب پیدا کرده و میتوان گفت در حال محبوب شدن است.بر میگردیم به مبحث خودمان یعنی Material UI، اگر بخوام در یک جمله توضیح بدم، متریال UI دقیقا بر پایه استانداردهای متریال دیزاین برای کتابخانه React طراحی شده است. تمام.در تصویر زیر چند نمونه از این کامپوننت ها رو مشاهده می کنید:تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sat, 27 Jul 2019 08:21:12 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%DA%86%D9%87%D8%A7%D8%B1%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-pwa-bzfkohclqf0x درود بر شما همراه همیشگی ویرگول،از طریق همین تریبون سلامی گرم میکنم به برنامه نویسان فارسی زبان سراسر جهان. شروع یک پروژه خوب و بسیار عالی سعادتی نصیبم کرد که در سی و سومین روز از چالش ۱۰۰ روز کد زدن به سراغ وب اپلیکیشن پیش رونده PWA یا همون Progressive Web App برم.وب‌اپلیکیشن‌های پیش رونده می‌توانند تحول بزرگ بعدی در حوزه‌ی اپلیکیشن‌های موبایل محسوب شوند. این فناوری که ابتدا در سال ۲۰۱۵ و توسط گوگل معرفی شد، به علت آسودگی نسبی توسعه و در اختیار قرار دادن یک تجربه‌ی کاربری آنی برای کاربران توجهات زیادی را به خود جلب کرده است.این PWA ها از جدیدترین فناوری‌ها در ترکیب اپلیکیشن‌های موبایل و وب‌سایت‌ها بهره می‌گیرند. یک وب اپلیکیشن پیش رونده در واقع وب‌سایتی است که از فناوری‌های مدرن وب استفاده می‌کند؛ اما ظاهر و کارکرد آن همانند یک اپلیکیشن معمولی است. پیشرفت‌های اخیر در مرورگرها، سرویس ورکرها، کش‌ها و رابط‌های برنامه‌نویسی نرم‌افزار (API)، توسعه‌دهندگان وب را قادر کرده تا وب اپلیکیشن‌هایی با قابلیت افزودن به صفحه‌ی خانگی سیستم‌عامل با امکان ارسال اعلان از سمت سرور (Push Notifications) و حتی عملکرد آفلاین توسعه دهند.وب اپلیکیشن‌های پیش رونده در مقایسه با اپلیکیشن‌های بومی موجود در فروشگاه‌های نرم‌افزاری از مزیت اکوسیستم گسترده‌تر وب و پلاگین‌ها و آسودگی نسبی توسعه و حفظ وب‌سایت‌ها برخوردار هستند. اگر از جمله توسعه‌دهندگان وب‌سایت و اپلیکیشن محسوب ‌شوید، حتما می‌دانید که ساخت یک وب‌سایت با صرف زمان کمتری قابل انجام است و نیازی به حفظ قابلیت پس‌سازگاریِ (backwards-compatibility) رابط‌های برنامه‌نویسی وجود ندارد؛ زیرا برخلاف چندپارگی نسخه‌های اپلیکیشن‌های بومی، تمام کاربران نسخه‌‌ای یکسان از کد وب‌سایت را اجرا می‌کنند.خصوصیات PWA:پیش رونده (قابل استفاده در هر دستگاه و سیستم‌عامل): یک وب اپلیکیشن پیش رونده فارغ از نوع مرورگر و نوع دستگاه، برای تمام کاربران قابل استفاده است.قابل جستجو: از آنجایی که وب اپلیکیشن‌های پیش رونده در واقع یک وب‌سایت محسوب می‌شوند، از طریق موتورهای جستجو قابل یافتن هستند. این خصوصیت، یک برتری قابل توجه آن‌ها بر اپلیکیشن‌های بومی است.قابل پیونددهی (لینک‌دهی): وب اپلیکیشن‌های پیش رونده برخلاف اپلیکیشن‌های بومی نیازی به طی کردن مراحل پیچیده‌ی دانلود و نصب ندارند و اشتراک‌گذاری آن‌ها از طریق یک نشانی وب (URL) به راحتی امکان‌پذیر است.انعطاف‌پذیر: رابط کاربری وب اپلیکیشن‌های پیش رونده خود را با هر نوع فرم فکتور اعم از موبایل و دسکتاپ و هر نوع اندازه‌ی نمایشگر تطبیق می‌دهد.ظاهر اپلیکیشن‌وار: یک اپلیکیشن پیش رونده شباهت بی‌بدیلی به اپلیکیشن‌های بومی دارد، از رابط کاربری مشابه آن‌ها استفاده می‌کند و مسیریابی در آن‌ها تفاوتی با اپلیکیشن‌های معمولی ندارد.بی‌نیاز از اتصال اینترنت: وب اپلیکیشن‌های پیش رونده در صورت ضعف اتصال اینترنت یا حتی به صورت آفلاین نیز قابل استفاده هستند.درگیر کردن کاربر: احتمال آنکه کاربران اپلیکیشن‌های موبایل مجددا از اپلیکیشن‌های خود استفاده کنند بیشتر از احتمال مراجعه‌ی مجدد به یک‌ وب‌سایت است. وب اپلیکیشن‌های پیش رونده با استفاده از ویژگی‌هایی نظیر اعلان‌های سمت سرور (Push Notification)، این ضعف را جبران کرده‌اند.قابل نصب: وب اپلیکیشن‌های پیش رونده را می‌توان همانند اپلیکیشن‌های بومی نصب و آیکون آ‌ن‌ها را به صفحه‌ی خانگی و حتی کشوی اپلیکیشن‌ها اضافه کرد؛ با این تفاوت که دسترسی به آن‌ها بی‌نیاز از دردسرهای جستجو در فروشگاه‌های اپلیکیشن است. این ویژگی استفاده از آن‌ها را به شدت آسان می‌کند.به‌روز بودن: در حالی که اپلیکیشن‌های بومی نیازمند به‌روزرسانی از طریق فروشگاه‌های نرم‌افزاری هستند، وب اپلیکیشن‌های پیش رونده به لطف فرآیند به‌روزرسانی سرویس ورکر، همیشه به آخرین نسخه، به‌روز هستند و هنگامی که محتوای جدید منتشر شود و کاربر به اینترنت متصل باشد، آن محتوا بلافاصله در دسترس کاربر قرار می‌گیرد.ایمن: از آنجایی که وب اپلیکیشن‌های پیش رونده در بستر HTTPS قرار دارند، از مخاطرات امنیتی در امان هستند.تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Wed, 24 Jul 2019 08:58:24 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D8%B3%D9%88%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-npm-mt1a8mzngllo درود بر شما خواننده عزیز، در سی و سومین روز از چالش بسیار بسیار عالی و آموزشی، انگیزشی ۱۰۰ روز کد زدن، کار رو با آشنایی عمیق تر NPM شروع کردم.همانگونه که می دانید، NPM یک نرم افزار مدیریت پکیج های نرم افزاری ند (Node Package Manager) برای زبان برنامه نویسی جاوا اسکریپت (Javascript) است که شما با استفاده از آن میتوانید به سادگی پکیج های آماده جاوا اسکریپت را به پروژه خود اضافه و از آنها استفاده کنید. همچنین بزرگ ترین منبع پروژه ها و پکیج های رایگان (Open Source) در این زمینه است.برای نصب NPM تنها کافیست نرم افزار Node.js را بر روی سیستم مربوطه نصب کنید.قطعه کد زیر با استفاده از NPM کتابخانه axios را در پروژه شما نصب می کند:نکته جالب اینکه سورس npm هم از طریق خود npm قابل بروزرسانی و حذف است. ;-)تا روزی دیگر و چالشی دیگر شما رو به خدای بزرگ و منان می سپارم. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Mon, 22 Jul 2019 08:37:44 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%D8%AF%D9%88%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-axios-uesl2upvedoh درود بر شما عزیزان، امیدوارم تا این لحظه ایام به کام بوده باشه و زندگی رو با شادی و سلامتی پیش برده باشید.در سی و دومین روز از چالش ۱۰۰ روز کد زدن، رفتم سراغ کتابخانه فوق العاده کاربردی Axios.این کتابخانه یک کلاینت HTTP بر اساس Promise هاست که برای کار با node.js و مرورگرها پیاده سازی شده است. وقتی کدهاتون با زنجیره ای از رویدادها در حال دست و پنجه نرم کردنه، نوشتن کد بصورت asynchronous میتونه به شدت گیج کننده باشه. در این زمان یکی از بهترین راه حل ها، استفاده از منطق Promise برای رفع این مشکل است.قطعه کد زیر با استفاده از axios، مشخصات کاربر با آیدی 1234 را برای ما در خروجی لاگ می کند:در نهایت توصیه می کنم مستندات این کتابخانه رو که از طریق این لینک در دسترس است به دقت مطالعه بفرمایید.حق نگهدارتان. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sun, 21 Jul 2019 08:08:49 +0430 https://virgool.io/nodejs/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D9%88-%DB%8C%DA%A9%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-pug-d65mrrsrlwv3 درود بر شما عزیزان، در روز سی و یکم از چالش و در ادامه مبحث Node.js رفتم سراغ موتور قالب حرفه ای PUG.به طور کلی وظیفه موتور های قالب (Template Engines)، جایگزینی مقادیر دریافت شده از سمت سرور که توسط Controller در اختیار موتور قرار میگیرد، در قالب (Template) می باشد. برای زبان های برنامه نویسی سمت سرور، موتورهای قالب فراوانی نوشته شده است. نود هم از این قاعده مستثنی نیست و از بین چند موتور قالب مطرح و کاربردی، PUG یکی از بهترین ها برای Node.js است. این موتور دارای ویژگی های قدرتمندی مانند شرط ها، حلقه ها، include ها، mixin هاست که با استفاده از آن ما می توانیم کد HTML را بر اساس ورودی کاربر یا داده های مرجع ارائه دهیم.کار با آن نیز بسیار ساده هست. برای مثال قطعه کد زیر که با PUG نوشته شده است:بعد از ترجمه به HTML به قطعه کد زیر تبدیل می شود:امیدوارم از کار کردن با این موتور قالب لذت ببرید.شاد و سرافراز باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sat, 20 Jul 2019 08:21:22 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%B3%DB%8C-%D8%A7%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-%D9%85%D8%B1%D9%88%D8%B1%DB%8C-%D8%A8%D8%B1-%D9%85%D8%A8%D8%A7%D8%AD%D8%AB-%DB%8C%DA%A9-%D9%85%D8%A7%D9%87-ouud1achuybd درود بر شما خواننده گرامی، امیدوارم حال تک تک شما هم میهنان عزیزم خوب و خوش باشه. امروز بعد از گذشت 30 روز از چالش که میشه معادل 30% اون، با توجه به فرار بودن مسائل و همچنین تکرار آنها جهت درج در حافظه بلند مدت، تصمیم گرفتم یک مرور کلی از مباحث ابتدای چالش تا آنچه که دیروز فرا گرفتم، داشته باشم.به همین دلیل موضوع جدیدی رو بررسی نکردم و اینکار رو برای فردا، سی و یکمین روز از چالش انجام میدم. طبق معمول به شدت به همه شما عزیزان پیشنهاد میدم این فرآیند صد روزه رو انجام بدن. واقعا مسیر پر چالش و لذتبخشی هست که در آینده به عنوان یکی از بهترین تجربیات زندگیتون توی مسیر پر پیچ و خم برنامه نویسی ازش یاد می کنید.سعی میکنم در پستی جداگانه، مزایا، معایب و تجربیاتم در این 30% رو با شما به اشتراک بگذارم.شاد و خرم و پیروز، در پناه حق باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Wed, 17 Jul 2019 07:29:35 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%A8%DB%8C%D8%B3%D8%AA-%D9%88-%D9%86%D9%87%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-express-js-oozdnu6tlos7 درود بر شما خواننده گرامی، در ادامه چالش ۱۰۰ روز کد زدن و بعد از گذراندن مقدمه ای از Node.js، برای تکمیل مبحث و بنا به پیشنهاد رسمی قریب به اتفاق ۹۹٪ آموزش های Node.js رفتم سراغ فریمورک محبوب و کاربردی Express js.اکسپرس‌ جی‌ اس (Express js)، یا بطور ساده، اکسپرس (Express) یک فریم‌ورک انعطاف پذیر وب برای نود جی‌ اس است که مجموعه‌ ای از ویژگی ها همچون APIهای ساده در اختیار ما قرار می‌دهد تا در ساختن بخش مدیریت (بک-اند یا back-end) در یک وبسایت یا اپلیکیشن موبایل از آنها استفاده کنیم. اکسپرس متن باز است و درحال حاضر توسط موسسه نود جی‌ اس پشتیبانی می‌شود. اکسپرس (Express js) همچنین میان‌افزارها (middlewares) و تعاریف مسیرنویسی (Routing) پایه را برای ما فراهم می‌سازد. فلسفه ی طراحی این پلتفرم به این صورت است که سعی شده پلتفرم به ابتدایی ترین شکل ممکن طراحی شود و کارکرد ها به صورت افزونه به آن اضافه شود.در قطعه کد زیر بعد از وارد کردن آدرس localhost:3000 بر روی مرورگر Hello World را مشاهده می کنیم.شاد و سرافراز و پیروز، در پناه حق باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Tue, 16 Jul 2019 17:44:18 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%A8%DB%8C%D8%B3%D8%AA-%D9%88-%D9%87%D8%B4%D8%AA%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-%D8%B4%D8%B1%D9%88%D8%B9-nodejs-ig4a3nyuqqu3 درود بر شما خواننده محترم و گرامی، بعد از گذشتن بیست و هفت روز از چالش صد روز کد زدن بالاخره رسیدیم به قسمت های فوق العاده شیرین و جذاب مباحث آموزشی و کد نویسی!بی مقدمه میرم سراغ معرفی یک محیط اجراییِ سمت سرورِ متن‌باز و چندسکویی برای زبان جاوا اسکریپت که در ابتدا در سال ۲۰۰۹ توسط رایان دال (Ryan Dahl) نوشته شد. خانم ها، آقایان معرفی می کنم: Node.jsاین پلتفرم از یک مدل I/O رویداد محور استفاده می‌کند که مسدود نشونده (non-blocking) است و همین امر باعث کاهش فشار موجود بر روی سرور و افزایش کارآیی می‌شود، به همین جهت برای اجرای برنامه‌های مبتنی بر داده که بصورت بلادرنگ (Real-Time) بر روی سرورهای نامتمرکز استفاده می‌شوند بسیار مناسب است. در ادامه می پردازم به برخی از مهم‌ترین ویژگی‌های این پلتفرم که باعث شده انتخاب اول برنامه‌نویس‌ها باشد:غیرهمزمانی و رویداد محوری: همه‌ی API های کتابخانه Node.js غیرهمزمان می‌باشند که همین امر باعث مسدودناپذیری (non-blocking) آن می‌شود. این بدان معناست که که Node.js در بستر سرور هیچگاه در انتظار بازگشت اطلاعات از API نمی‌ماند. سرور پس از صدا زدن یک API به سمت API بعدی حرکت می‌کند و برای اطلاع از وضعیت API قبلی از مکانیزم ثبت رویداد استفاده می‌کند.سرعت بالا: با توجه به این که نود جی اس بر پایه نسخه 8 موتور جاوا اسکریپت گوگل کروم(V8) پیاده‌سازی شده است در اجرای کدها بسیار سریع عمل می‌کند.تک موضوع اما بسیار مقیاس‌ پدیر: نود جی اس از یک مدل تک موضوعی به همراه حلقه رویددادها استفاده می‌کند. مکانیزم رویداد باعث می‌شود که سرور به صورت مسدود نشونده پاسخ‌ها را ارسال کند و همین امر باعث می‌شود بر خلاف مکانیزم‌های سنتی که سرور را محدود به چند درخواست برای پردازش درخواست‌ها می‌کرد سرور بسیار مقیایس‌پذیر شود.نود جی اس از یک برنامه تک موضوعی استفاده می‌کند و همان برنامه می‌تواند سرویسی برای تعداد بسیار بیشتری از درخواست ها نسبت به مکانیزم های قدیمی سرور مثل HTTP سرور آپاچی فراهم کند.عدم وجود بافرینگ: این پلتفرم هیچ داده‌ای را بافر نمی‌کند و داده‌های خروجی را به صورت تکه‌تکه منتشر می‌کند.سعادتی شد روز بیست و هشتم رو با Node.js عزیز و دوست داشتنی شروع کنم و اونو در روزهای آتی ادامه بدم تا در اون به درجات عرفانی دست پیدا کنم. ;-)تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy منبع + منبع Mohammad Ghasemi Mohammad Ghasemi Mon, 15 Jul 2019 08:22:42 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%A8%DB%8C%D8%B3%D8%AA-%D9%88-%D9%87%D9%81%D8%AA%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-functional-programming-zptopmgfwpsd درود بر شما عزیزان، در بیست و هفتمین روز از چالش جذاب 100 روز کد زدن، رفتم سراغ مبحث Functional Programming از سری مباحث آموزشی، تعاملی وبسایت خوب Free code camp که متاسفانه در ایران دسترسی به اون فقط از طریق ... (همون که باهاش تلگرام رو باز می کنید) امکان پذیر است.برنامه نویسی تابعی چیست؟بر اساس تعریف ویکی‌پدیا، برنامه‌نویسی تابعی یک پارادایم برنامه‌نویسی یا سبکی برای ایجاد ساختار و عناصر برنامه‌های رایانه‌ای است که با محاسبه به صورت یک ارزیابی تابع‌های ریاضیاتی برخورد می‌کند و از وضعیت‌های در حال تغییر و داده‌های تغییرپذیر اجتناب می‌کند. در واقع اگر تابع رو یک کارخانه در نظر بگیریم، مواد اولیه کارخانه همان ورودی های تابع و محصولات تولید شده در کارخانه همان خروجی تابع می باشند.اجازه بدید برای مثال یک تابع ساده که وظیفه برگرداندن جمع دو عدد که از ورودی دریافت می کند، را با هم پیاده سازی کنیم.شاد و سرفراز باشید. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sun, 14 Jul 2019 10:55:12 +0430 https://virgool.io/@mohstarsos1/%D8%B1%D9%88%D8%B2-%D8%A8%DB%8C%D8%B3%D8%AA-%D9%88-%D8%B4%D8%B4%D9%85-%D8%A7%D8%B2-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-object-oriented-programming-d6aaxe2lr0lh درود بر شما خواننده محترم، به نقل از ویکی پدیا، برنامه نویسی شی گرا (Object Oriented Programming) شیوه برنامه‌نویسی است که ساختار یا بلوک اصلی اجزای آن، شی‌ها می‌باشند. در واقع در این شیوه برنامه‌نویسی، برنامه به شی گرایش پیدا می‌کند. به این معنا که داده‌ها و توابعی که قرار است بر روی این داده‌ها عمل کنند، تا حد امکان در قالبی به نام شی در کنار یکدیگر قرار گرفته، جمع‌بندی شده و یک واحد (شی) را تشکیل داده و نسبت به محیط بیرونِ خود، کپسوله (Encapsulation) می‌شوند و از این طریق، توابع بیگانهٔ خارج از آن شی، دیگر امکان ایجاد تغییر در داده‌های درون آن شی را ندارند.به‌ عنوان مثال حساب بانکی شما که شامل مشخصات فردی شما و میزان سپردهٔ شما در بانک است، تشکیل یک شی را می‌دهند و به دلیل دارا بودن ویژگی کپسوله، امکان دستکاری در میزان سپرده یا مشخصات شما، توسط دیگران وجود ندارد. از دیگر ویژگی‌های برنامه‌نویسی شی گرا، پیچیدگی کم، هزینه کم، امکان گسترش سریع برنامه با خطای کمتر نسبت به سایر پارادایم‌های برنامه‌نویسی است.امروزه زبانهای برنامه نویسی بسیاری از این قابلیت پشتیبانی می کنند که برای مثال از مهمترین آنها می توان به زبان های JavaScript, Java, C++, C#, PHP, Perl, Ruby اشاره کرد.در روز بیست و ششم اما چالش رو با یادگیری مبحث برنامه نویسی شی گرا در وبسایت خوب Freecodecamp پیش بردم.تا درودی دیگر، بدرود. https://virgool.io/@mohstarsos1/%D8%B4%D8%B1%D9%88%D8%B9-%DA%86%D8%A7%D9%84%D8%B4-%DB%B1%DB%B0%DB%B0-%D8%B1%D9%88%D8%B2-%DA%A9%D8%AF-%D8%B2%D8%AF%D9%86-fxbkp0t9btcy Mohammad Ghasemi Mohammad Ghasemi Sat, 13 Jul 2019 12:13:46 +0430