https://virgool.io/feed/@bhnmzm برنامه نویس fa 2026-06-07 08:55:15 https://files.virgool.io/upload/users/28683/avatar/i4Qfyj.png?height=120&width=120 https://virgool.io/@bhnmzm https://virgool.io/@bhnmzm/%DB%B1%DB%B0-%D8%AA%DA%A9%D9%86%DB%8C%DA%A9-%D9%88-%D9%86%DA%A9%D8%AA%D9%87-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF%DB%8C-%D8%AF%D8%B1-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D8%B2%D8%A8%D8%A7%D9%86-%D8%A7%D9%86%DA%AF%D9%84%DB%8C%D8%B3%DB%8C-lnnmxv4vbzea در این پست ۱۰ مورد از تکنیک ها و نکات کاربردی در یادگیری زبان انگلیسی رو مطالعه خواهید کرد که یقین دارم که برای خیلی ها مفید خواهد بود.نکات یادگیری زبان انگلیسی (منبع عکس unsplash)چند روز پیش پستی منتشر کردم و از دوستان خواهش کردم٬ اگر در حال یادگیری زبان #انگلیسی (یا هر زبان دیگری) هستند و یا قبلا این تجربه رو داشتند یک پیشنهاد کاربردی که روند یادگیری رو براشون راحت تر کرده رو بنویسند.تعداد زیادی پیشنهاد و راه کار مستقیم در کامنت ها نوشته شد و خیلی خوب میدونم تک تک دوستان کلی زمان و انرژی برای یادگیری صرف کردن که الان تونستن تجربشون رو در قالب جملات یا پاراگراف ها با ما شیر کنند. از همشون ممنونم :)در ادامه ۱۰ مورد از تکنیک ها و نکات کاربردی در یادگیری زبان رو مطالعه خواهید کرد که یک جمع بندی از پیشنهادات دوستان و تجریات شخصی خودم هست و یقین دارم که برای خیلی ها مفید خواهد بود.1- در یادگیری لغات به active یا passive بودن لغت دقت کنید.2- به یادگیری و مرور لغات جدید به صورت تکی اکتفا نکنید. برای یادگیری لغات متن (مقاله/کتاب/خبر و غیره) بخونید.3- در زمان مرور لغات٬ با سه لغت آخری که مرور کردین جمله سازی کنید! با انجام این تکنیک ساده شما هر لغت (به جز سه لغت اول که مرور رو شروع کردین) را حداقل سه بار در جمله با کار خواهید برد! و این تمرینی میشه که لغت قبلی فوری یادتون نره!4- با خودتون صحبت کنید. سعی کنید انگلیسی فکر کنید و کارهای روزمره خودتون رو با جملات انگلیسی بگید. این کار رو میتونید روبروی آینه انجام بدین و یا ویدئوی خودتون رو ضبط کنید.5- یک متن رو چندین بار بخونید و کنارش صدای خودتون رو ضبط کنید و گوش بدید. اگر موقع گوش دادن دوباره اشتباهی در جمله ها یا تلفظ لغات خودتون متوجه شدید وویس رو دوباره ضبط کنید و این کار رو تا زمانی که تمام اشتباهات رو اصلاح نکردین ادامه بدین.6- همزمان به معنی٬ فرم و تلفظ چیزی که یاد میگیرید دقت کنید.7- با افراد native در ارتباط باشید.8-? مرور به روش لایتنر!‌ مرور مداوم قطعا کلید یادگیری بلند مدته و برای این نرم افزارها و ابزارهای زیادی وجود داره که میتونید ازشون استفاده کنید. من خودم از WordUp استفاده میکنم که میتونم بگم فوق العادست و تاثیر زیادی در گسترش دایره لغاتم داشته. به جز اون میتونید از نرم افزار Anki هم برای مرور استفاده کنید.9-?? فیلم یا ویدئو را با زیرنویس تاخیر دار تماشا کنید. میتونم بگم این تکنیک تاثیر گذارترین تکنیکی بوده که من برای محتوای ویدئویی استفاده کردم. تماشای ویدئو با زیرنویس تاخیر دار دو مزیت داره٬ ۱- در عین حال که تمرکزتون روی لیسینینگ هست٬ بخش بصری محتوا رو از دست نمیدید ۲- بجای تماشای دوباره ویدئو/فیلم رو یک بار میبینید و در زمان صرفه جویی می کنید. برای دوستانی که در وبسایت یوتیوب محتوا زیاد میبینند پیشنهاد میکنم این افزونه YouTube Subtitle Delay رو استفاده کنید و یا اگر از وبسایت Netflix برای دیدن فیلم و سریال استفاده میکنید این افزونه میتونه به کارتون بیاد.10- ?? از دیکشنری انگلیسی به انگلیسی استفاده کنید. من انگلیسی رو بعد از اینکه دیکشنری استفاده از انگلیسی به فارسی رو از عادت هام کنار گذاشتم یاد گرفتم! پیشنهاد من دیکشنری  merriam-webster هست و اگر بیشتر پای سیستم هستین و مرورگر کروم رو استفاده میکنید توصیه میکنم این افزونه Merriam-Webster dictionary رو استفاده کنید.سه مورد آخر تاثیرشون در یادگیری من بیش از حد بوده!لطفا نظرتون رو برام بنویسید. بهنام عظیمی بهنام عظیمی Wed, 06 Jul 2022 10:53:22 +0430 https://virgool.io/@bhnmzm/%D8%A2%D9%85%D8%A7%D8%B1-%D8%A8%D8%A7%D8%B2%D8%AF%DB%8C%D8%AF-%D9%BE%D8%B3%D8%AA-%D9%87%D8%A7%DB%8C-%D9%85%D9%86-%D8%AF%D8%B1-%D8%B3%D8%A7%D9%84-%DB%B9%DB%B9-obrpkckr1opy در طول تاریخ از اعداد استفاده کردیم تا اغلب داد و ستد کنیم و آن‌چیزی که شمردنی است را بشماریم. برای هر عدد واحد درست کردیم تا عددهای زندگی قاطی نشوند و از اعداد، شفاف‌تر استفاده کنیم؛ مثلا وقتی می‌گوییم ده هزار تومان به پول اشاره داریم و وقتی می‌گوییم ده هزار بلیط به بلیط!روز به روز که در زندگی جلو‌تر رفتیم عددها فرقی نکردند ولی این واحدها بودند که زیاد شدند. واحد کریپتو، واحد اصله درخت، واحد فاصله و …«واحد» یک توافق عمومی است برای شمردن؛ تا همانطور که گفتم شمردن‌ها قاطی نشود. مشاهده افراد دارای ثروت (اجتماعی یا مالی) به من ثابت کرده اینکه چه چیزی را بشماریم از اینکه چطور بشماریم مهم‌تر است. هرکس با واحد خاصی مسائل زندگی را می‌شمارد. اینطور به نظرم آمده که مشخص کردن واحد یعنی مشخص کردن اینکه من در زندگی برای چه چیزهایی ارزش قائلم و می‌خواهم چه چیزهایی را در زندگی بشمارم. https://cdn.virgool.io/annual-report/1399/l27thyaaenf9-ISyZP.mp4 اعدادی که بدون واحد ثبت کردمبه ویدیویی که ویرگول برایم ساخته که نگاه می‌کنم میبینم که در سال ۹۹، من در مجموع ۴,۴۴۶ کلمه در ویرگول نوشتم و منتشر کردم و مخاطبین، پست‌های من را ۱۵۸ مرتبه پسندیدند و ۲۶ بار هم نظر خود را روی پست‌های من به اشتراک گذاشتند. در سال ۹۹، ۶۶ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. این اعداد نشان میدهند من کاری کرده‌ام. هرکدام به واحدی وصل هستند. از خودم می‌پرسم من کدام واحد را شمارش کرده‌ام؟ کدامیک از واحدهای بالا از همه برای من مهم‌تر است؟ ادامه ویدیو را می‌بینم.آمار از اثر بیرونی می‌گویندطبق آمار پست‌های من ۲,۱۱۱ بار خوانده شدند و ۳,۵۲۳,۱۱۹ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیتی که در ایران به اینترنت دسترسی دارند، ویرگول به من می‌گوید که توانستم ۰/۰۴۸۳۰۱۶۰۴ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم.از طرف دیگر ویرگول به من می‌گوید که اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۱۰,۳۱۰ کاغذ مصرف می‌کردم.آن عددهای کوچک ابتدای ویدیو حالا تبدیل شده‌اند به عددهای بزرگ به اینکه من جلوی مصرف این تعداد کاغذ را گرفتم یا به اینکه من ۰/۰۴۸۳۰۱۶۰۴ ثانیه، سرانه مطالعه دیجیتال کشور را جابه جا کرده‌ام. واحد این عددها برای من ملموس‌تر است.واحد نوشتن چیست؟همه عددهای بالا و همینطور اثر بیرونی که روی خوانندگان و همینطور در مقیاس بزرگتر طبیعت و جامعه اطرافم گذاشتم اعدادی هستند که من دوستشان دارم و به آنها افتخار می‌کنم. اگر چنین ویدیویی دست شما نیز رسید به شما بابت تک تک اعداد تبریک می‌گویم.اثر هر نوشته تا حدودی معلوم است، اگر بنویسید جلوی قطع درخت را می‌گیرید، به سرانه مطالعه کشور اضافه می‌کنید و خوانندگانی جذب می‌کنید که شما را از طریق نوشته‌هایتان می‌شناسند و …به نظرم می‌رسد که نوشته‌های من و شما واحد ندارند ولی اثر بیرونی دارند. بهنام عظیمی بهنام عظیمی Wed, 24 Mar 2021 11:57:11 +0430 https://virgool.io/@bhnmzm/%DA%A9%D9%84%DB%8C%D8%AF-%D9%85%DB%8C%D8%A7%D9%86%D8%A8%D8%B1-%D8%A7%D8%AE%D8%AA%D8%B5%D8%A7%D8%B5%DB%8C-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA-%D8%AF%D8%A7%D8%AE%D9%84-%D9%88%D8%A8-%D8%B3%D8%A7%DB%8C%D8%AA-o1bvrqxno6v1 میدونیم که کلیدهای میانبر صفحه کلید در وب سایت ها محدود به میانبرهایی که توسط توسعه دهنده/طراح سایت برای یک عملیات خاص تعیین شده و میشه گفت این محدودیت معمولا برای اکثر کسایی که مدام باید یک سری کار روتین و تکراری رو در سایت های مخلتف با ماوس انجام میدن سخت و حتی عذاب آور میکنه. کلید میانبر اختصاصی برای عملیات داخل وب سایتبرای حل این مسئله سه تا راه وجود دارد. یا باید خودتون اسکریپت بنویسید و برای هر سایت اجرا کنید، یا اینکه از تیم توسعه سایت بخواید که برای عملیات مورد نظر شما هم شورت کات تعیین کند که یکم دور از انتظار هست.راه حل سوم استفاده از افزونه In-site Shortkeys در مرورگر کروم است. با این افزونه به راحتی می تونید برای عملیات خاص در یک وب سایت کلید میانبر تعریف کنید. روش استفاده ازش خیلی سادست، به افزونه دستور اضافه کردن کلید میانبر جدید میدید و افزونه کلیک(های) شما رو رصد میکنه و در آخر هم میتونید برای عملیاتی که انجام دادید یک شورت کات تعیین کنید.اضافه کردن عملیات چند مرحله ای از ویژگی های خوب این افزونه است. یعنی با این افزونه میتونید برای کلیک های پی در پی هم شورت کات تعیین کنید و زمانی که اون کلید میانبر صدا زده شد، افزونه قدم به قدم عملیات مورد نظر رو انجام میده. البته با یک تاخیر زمانی بین هر قدم که اون رو هم خودتون مشخص میکنید.همچنین میتونید برای اجرای کدهای جاوا اسکریپت سفارشی در وب سایت هم کلید میانبر تعریف کنید و اونها رو با سایت های دیگه به اشتراک بگذارید.کلید های میانبر کلیکی منحصر به هر دامنه هستش این یعنی شورت کات هایی که برای یک سایت اضافه شده فقط در همون سایت در دسترس خواهد بود.در تعیین کلید های میانبر هر ترکیب از کلید ها معتبر است. برای مثال shift + a و یا a + b + c. فقط نکته ای که باید توجه داشته باشید اینه که نمی تونید از کلید های میانبر رزرو شده توسط خود مرورگر کروم (مثل ctrl + t و ctrl + shift + n و ctrl + w و ctrl + n و چند کلید میانبر دیگه) استفاده کنید.نکته ای که باید توجه کنید اینه که افزونه فقط در وب سایت ها کار میکند و شورت کات ها زمانی اجرا میشه که فوکوس بر روی محتوای سایت باشه و نه یک پنجره دیگه. طبیعتا موقع فراخوانی شورت کات باید در سایت و صفحه ای باشید که اون شورت کات را تعریف کردید چون افزونه نیاز داره که عنصری که روش کلیک کردید رو پیدا کنه.برای مثال من با استفاده از این افزونه کلید میانبر alt + n رو برای رفتن به صفحه نوشتن مطلب جدید ویرگول اضافه کردم و هر موقع بخوام یک مطلب جدید بنویسم، ویگول رو باز میکنم و کلیدهای alt + n رو فشار میدم.در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.سه الگوی پر کاربرد در ReactJSچینش خاص عناصر در HTML اصلا سخت نیستمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منامیدوارم این افزونه براتون مفید واقع بشه. بهنام عظیمی بهنام عظیمی Wed, 25 Nov 2020 18:52:24 +0330 https://virgool.io/Only-js/%D8%B3%D9%87-%D8%A7%D9%84%DA%AF%D9%88%DB%8C-%D9%BE%D8%B1-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%D8%AF-%D8%AF%D8%B1-reactjs-lhmj3grou6uq سلام دوستاندر این نوشته اشاره ای می کنم به سه تا الگوی پرکاربرد در ReacJS. به احتمال زیاد این الگوها رو هنگام استفاده از کتابخانه ها و یا در نمونه کدهای مختلف دیدین و تجربه ی استفاده هم داشتید. در اینجا هم میخوام باهم نگاهی به پشت پرده این الگو ها بندازیم و ببینیم چطور پیاده سازی میشن و دقیقا چه مزایایی برای ما دارن.سه الگوی پرکاربرد در reactjsالگوی Function as Child (تابع به عنوان فرزند)در این الگو در واقع React به ما اجازه میده که یک تابع را به عنوان فرزند به کامپوننت بفرستیم.? پارانتز باز:فرزند یا فرزندان داخل یک کامپوننت در اجرای کلاس یا تابع کامپوننت تحت عنوان یک prop به نام children به کامپوننت ارسال میشه.پارانتز بسته!الگوی نمونه رو در کد زیر مشاهده میکنید: https://gist.github.com/behnamazimi/e9534782ef5a805f130c5b52d95d6d17 در کارکرد استاندارد در واقع ما با ارسال تابع فرزند انتظار داریم که اون تابع به عنوان متد رندر کامپوننت عمل کنه. الان باید ببینیم که داخل کامپوننت Calculator چه اتفاقی باید بیفته تا چیزی که انتظار داریم انجام بشه. https://gist.github.com/behnamazimi/ad79e92751aa422f9df55eb79efd5e04 همونطور که میبینید، کامپوننت MyComponent به عنوان مقدار برگشتی، نتیجه ی اجرای پراپرتی children رو برمیگردونه. یعنی در واقع متدی که به عنوان فرزند بهش پاس دادیم (که چون متد هست پس قابل فراخوانی هم هست) رو اجرا میکنه و نتیجه ی اجرای اون تابع به عنوان مقدار برگشتی MyComponent رندر میشه.این الگو کاربردهای زیادی داره. مثلا وقتی بخواید روی پراپرتی های یک کامپوننت محاسباتی انجام بدید و یا وقتی بخواید مقادیر async رو کنترل کنید میتونید از این الگو استفاده کنید.در مثال پایین از این الگو استفاده کردم تا یک کامپوننت کنترل انیمیشن خیلی ساده درست کنم. کامپوننتی به اسم TranslateX که قرار هست المان های زیرش رو به صورت افقی از یک نقطه به نقطه ی دیگه جابجا کنه. https://gist.github.com/behnamazimi/fe445586b8261b0dd880756d90c5d988 https://codesandbox.io/s/blissful-bell-lm5td نکته ای که باید بهش توجه کنید اینه که تابعی که به عنوان فرزند به یک کامپوننت پاس میدیم، یک تابع ساده است و نمیتونه نقش یک Functional Component رو برامون بازی کنه. یعنی در واقع react در هر بار رندر کامپوننت به جای اینکه کامپوننت (های) فرزند رو صدا بزنه و رندر کنه، یک تابع معمولی رو دوباره فراخوانی میکنه. در نتیجه در داخل Child Function نمیشه از hook ها و متد های Lifecycle استفاده کرد.الگوی HOC یعنی Higher-order componentsالگویی کاربردی دیگه ای که قراره بررسی کنیم HOC هست. به احتمال زیاد این الگو رو بارها در کدهای react دیدین. https://gist.github.com/behnamazimi/db6f49f993e6d2d1c41b28d6bf9e97c8https://gist.github.com/behnamazimi/9f8c91e2ab168dea77711961b250fbfb ? پارانتز باز:در برنامه نویسی یک تعریف داریم به اسم تابع بالا مرتبه و یا higher-order function. برای اینکه بتونیم بگیم یک تابع HO هست یا نه حداقل باید یکی از شرایط زیر در موردش صادق باشه:یک یا چند تابع دیگه رو به عنوان ورودی (argument) بگیرهنتیجه ای که برمیگردونه یک تایع باشهپارانتز بسته!با استناد به پارانتزی که بالا باز کردم و همینطور با توجه به اینکه میدونیم هر کامپوننت react هم در واقع یک function هست پس دور از انتظار نیست که یک Component داشته باشیم که تابع یا توابعی رو به عنوان پراپرتی بگیره ویا یک تابع رو به عنوان خروجی برگردونه. در react به کامپوننتی که حداقل یکی از ورودی هاش و خروجیش کامپوننت باشه میگیم Higher-order Component.در یک توضیح کامل تر، HOC کامپوننتی هست که به عنوان یک لایه برای کامپوننت ورودی (کامپوننتی که به عنوان پارامتر به تابع فرستاده میشه) عمل میکنه. یعنی کامپوننت رو میگیره و بعد از انجام یک سری عملیات یک کامپوننت دیگه رو به عنوان خروجی برگشت میده. https://gist.github.com/behnamazimi/db6f49f993e6d2d1c41b28d6bf9e97c8 زمانی که بخوایم عملیات مشترکی روی کامپوننت ها انجام بدیم اون عملیات رو در قالب یک HOC پیاده سازی میکنیم و در مواقع نیاز HOC رو همراه با کامپوننت هدف صدا میزنیم. مثلا در مثال withSomething من خواستم که پراپرتی something رو به کامپوننت هام اضافه کنم. پس MyComponent رو به تابع withSomething پاس دادم و اون هم بعد از اضافه کردن پراپرتی مورد نظر به کامپوننت من، در خروجی یک کامپوننت جدید برام برگشت داده.الگوی Sub Components ویا Dot notation components https://gist.github.com/behnamazimi/5fe5f2d5d8700cb3c644c95edeaecb1a تا حالا با کامپوننت های آماده ای کار کردید که sub-component هم داشته باشن؟ در واقع اکثر کتابخانه های UI از این ویژگی استفاده میکنند. یعنی یک کامپوننت که چند کامپوننت دیگه رو به عنوان زیرمجموعه اش داره.میشه گفت رابطه ی این زیر کامپوننت ها با والدشون دقیقا به اندازه یک نقطه است.? پارانتز باز:برای درک این الگو نیازه که با مفهوم پراپرتی ها و متدهای static در جاوا اسکریپت آشنا باشید. توضیح این مفهوم در یک پارانتز کوچک جا نمیشه برای همین مطالعه اش به عهده خودتون.پارانتز بسته!برای پیاده سازی این الگو روش های مختلفی وجود داره که من در زیر چند موردش رو مثال زدم https://gist.github.com/behnamazimi/7f5ec9eb31ab71ee1bc59e0cb143462c معمولا برای دسته بندی کامپوننت ها تحت یک اسم و بالا بردن خوانایی کد و دسترسی سریع به کامپوننت ها از این الگو استفاده میکنیم.امیدوارم این مطلب براتون مفید واقع بشه. نظراتتون خوشحالم میکنه. :)در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.چینش خاص عناصر در HTML اصلا سخت نیستمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منبرای مطالعه نوشته هام منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Sun, 08 Nov 2020 14:24:04 +0330 https://virgool.io/@bhnmzm/%DA%86%DB%8C%D9%86%D8%B4-%D8%AE%D8%A7%D8%B5-%D8%B9%D9%86%D8%A7%D8%B5%D8%B1-%D8%AF%D8%B1-html-%D8%A7%D8%B5%D9%84%D8%A7-%D8%B3%D8%AE%D8%AA-%D9%86%DB%8C%D8%B3%D8%AA-knqwqcqahgbt به عنوان یک توسعه دهنده ی فرانت اند بعضی وقتا لازم میشه که عناصر رو به شکل های خاصی کنار هم بچینیم. سختی این کار بسته به قوه تخیل طراح UI تون میتونه متفاوت باشه ولی در کل چینش عناصر اگر با مفاهیم و اصول آشنا نباشی کار واقعا سختیه.چینش قوسی عناصر در HTML با ابزار ellipsis-htmlمعمول ترین شکل چینش که من زیاد توی پروژه هام باهاش درگیر بودم و توی خیلی از طرح ها دیدم شکل قوس است. برای مثال چینش به شکل یک نیم دایره، یا دایره کامل، یا چینش به شکل نیم بیضی و یا بیضی کامل؛ که برای پیاده سازیش حتما باید با معادلات ریاضی سر و کله بزنید تا آخر سر بتونید چیزی که میخواهید رو درست کنید.قسمت جالبش اینجاست که از این به بعد کارمون راحته و از میزان WTF/S (بخونید، این چیه آخه بر ثانیه) که نثار طراح میکنیم کم میشه. چون دقیقا برای این کار یعنی چینش عناصر روی منحنی بدون درگیر شدن با کدهای ریاضی یک ابزار کوچولو توسعه دادم به اسم ellipsis-html.با استفاده از ellipsis-html دو کیلوبایتی می تونید آیتم های داخل یک عنصر رو به شکل بیضی (کامل و یا یک قسمت از بیضی و البته دایره که یک نوع از بیضی هست) کنار هم بچینید. توی شکل پایین نمونه ای از چینش هایی که با این ابزار درست کردم رو میتونید ببینید.چند نمونه از چینش های ابزار ellipsis-htmlاستفاده از این ابزار خیلی راحته. با اینکه توضیحات کامل توی صفحه Github موجود هست ولی من اینجا هم خیلی خلاصه بهش اشاره میکنم.اگر از npm استفاده میکنید، با دستور npm install ellipsis-html ابزار رو به پروژتون اضافه کنید و یا اینکه تگ اسکریپت زیر رو در پروژتون کپی کنید.<script src="http://unpkg.com/ellipsis-html/lib/ellipsis-html.min.js">در کد زیر هم یک مثال کامل رو مشاهده می کنید. نتیجه این کد رو در تصویر اصلی مطلب می بینید که آواتارهای داخل عنصر avatars به صورت مرتب کنار هم چیده میشن. https://gist.github.com/behnamazimi/333d4cf109e0b429886e174e0fe33184 تنظیمات ابزار بهتون این امکان رو میده که عناصر را در هر شکل از زیر مجموعه بیضی کنار هم بچینید و در هر موقعیتی از عنصر مادرتون که میخواید قرار بدید. مستنداتی توی صفحه گیت هاب نوشتم رو حتما مطالعه کنید.اگر سوالی داشتید من در خدمتم. اگر ایده ای برای تکمیل تر شدن ابزار دارید و یا باگی دیدین خیلی خوشحال میشن توی پروژه مشارکت کنید و یا می تونید در قسمت issues مطرح کنید.اگر از پروژه خوشتون اومد با Star دادن توی گیت هاب شادم کنید ??.در ادامه هم چند تا از مقالاتم رو لینک میکنم شاید خوشتون اومد:انجام عملیات مشترک بر روی سرویس ها - Javascript Service Wrapperانیمیشن فرار - حس خوبی که مدیون CSS اممربع بدون ارتفاع - سری نوت های CSS منمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپت بهنام عظیمی بهنام عظیمی Thu, 20 Aug 2020 20:12:51 +0430 https://virgool.io/coderlife/%D8%B2%D8%A8%D8%A7%D9%86-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D9%85%D8%AB%D9%84-%D8%B5%D8%AD%D8%A8%D8%AA-%DA%A9%D8%B1%D8%AF%D9%86%D9%87-mthyg5ijwapt وقتی یک برنامه نویس داره کد نویسی میکنه، توی ذهنش چه اتفاقی میفته؟این سوال در یکی از جلسات سه پروفسور (مسئول تحقیقات) مطرح شده و تصمیم گرفتن که جوابشو پیدا کنن. زبان برنامه نویسی؛ برنامه نویسی مثل صحبت کردنه!محققان برای پیدا کردن جواب این سوال از تکنیک های تصویربرداری علم اعصاب استفاده کردن تا بفهمن کدام بخش از ذهن موقع کد نویسی فعال میشه.نتیجه ی این تحقیق واقعا هیجان انگیز بوده (هم برای خودشون و هم برای من که وقتی داشتم مطلب رو میخوندم کیف کرد). ایشون متوجه شدن که برنامه نویسی مثل صحبت کردنه. یعنی نتایج اینجور نشون داده که موقع برنامه نویسی مناطقی از ذهن فعال میشه که مربوط به پردازش زبان طبیعی بوده.پروفسور Apel، یکی از محققان گفته که، "چیزی که مارو متعجب کرد این بود که هیچ فعالیتی در قسمت های مربوط به تفکرات ریاضیات و یا منطقی مشاهده نکردیم." و در یه جای دیگه گفته "طبق تحقیقات ما، درک گفتار نقش محوری در برنامه نویسی داره."این تحقیق اولین آنالیز ذهنی در برنامه نویسی هست و در واقع اولین بار هست که رفتار ذهن یک برنامه نویس موقع درگیری با کد بررسی و دیده شده.حالا مراحل انجام تحقیق چجوری بوده؟تیم تحقیق از متد subtraction که (طبق چیزی که در مقاله اصلی نوشته شده) در علوم اعصاب اثبات شده هست استفاده کردن.در مرحله اول از افرادی که روشون تست انجام میشده خواستن که خروجی یک کد پیچیده و منطقی رو بفهمند و در این حین از ذهنشون تصویر برداری کردن.بعد از کمی استراحت، ازشون خواستن که یک قطعه کد که حاوی خطاهای نحوی (Syntax Error) هست رو بررسی کنند که در واقع یک کار روتین در برنامه نویسی هست و نیازی به فهم کد و منطق اون نداره و در حین انجام این کار هم تصویر برداری کردن.این مراحل رو چندین بار تکرار کردن و در نهایت تصاویری توموگرافی کار روتین رو از تصاویر کار پیچیده تر تفریق (subtract) کردن. مناطق باقی مونده در تصویر، نشون دهنده ی بخش هایی بوده که در برنامه نویسی درگیر بودن.این تیم تحقیقاتی حالا امیدوار هست که بتونه تفاوت درک برنامه (کد های برنامه) بین متخصصان و برنامه نویس های مبتدی رو بررسی و پیدا کنه.من که از کارشون و مخصوصا از نتیجه کارشون واقعا لذت بردم. و خسته نباشید میگم بهشون. لازمه اینجا یک پارانتز باز کنم و بگم که من مترجم مقالات علمی نیستم و فقط یک برنامه نویس ام. مطلب اصلی رو توی سایت Medical Express خودنم و چون واقعا برام جذاب بود خواستم اینجا بنویسم و با دوستان به اشتراک بزارم. امیدوارم شما هم لذت برده باشید. مطلب اصلی رو حتما مطالعه کنید چون جزئیات مربوط به تیم و خیلی چیزای دیگه توش هست که من اینجا بهشون اشاره نکردم. در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.انجام عملیات مشترک بر روی سرویس ها - Javascript Service Wrapperانیمیشن فرار - حس خوبی که مدیون CSS اممربع بدون ارتفاع - سری نوت های CSS منمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Wed, 10 Jun 2020 12:01:50 +0430 https://virgool.io/@bhnmzm/%D8%A7%D9%86%D8%AC%D8%A7%D9%85-%D8%B9%D9%85%D9%84%DB%8C%D8%A7%D8%AA-%D9%85%D8%B4%D8%AA%D8%B1%DA%A9-%D8%A8%D8%B1-%D8%B1%D9%88%DB%8C-%D8%B3%D8%B1%D9%88%DB%8C%D8%B3-%D9%87%D8%A7-javascript-collective-service-wrapper-pev99axo7eyr سلام دوستان؛ فرض کنید توی پروژتون نیاز دارید که با بک-اند در شرایط و تحت وب سرویس های مختلف ارتباط برقرار کنید. با فرض اینکه تعداد وب سرویس ها 20 باشه، شما باید حداقل 20 متد سرویس داشته باشید که در موقع نیاز اون رو فراخوانی کنید. در یک ارتباط نرمال، شما باید نتیجه ای که وب سرویس بهتون برگشت میده رو کنترل کنید، باید به خطاهایی احتمالی عکس العمل منطقی نشون بدید، شاید نیاز باشه پارامتر های احراز هویت رو در هر درخواست بروزرسانی کنید و خیلی مورد دیگه. این موارد اکثرا بین درخواست ها مشترک هست. حالا فکر کنید که همه ی این کارا رو باید روی تک-تک اون 20 تا متد انجام بدید (که خیلی هامون انجام میدیم). ولی اگه یه راه آسون تر برای این کار وجود داشته باشه چی؟ اگه بخوام به صورت خیلی ساده توضیح بدم، شما در اینجور مواقع باید متدهای سرویس هاتون رو از داخل یک تایعی رد کنید و همه ی کارای مشترک رو بسپرید به اون تابع. در توضیح تخصصی تر، شما نیاز به یک کلاس یا متد پوششی دارید که همه ی عملیات مربوط به سرویستون داخل اون انجام بشه و شما بتونید در هر جایی که نیاز داشتید درش دست ببرید و باب نیازتون تغییرش بدید. این ساختار نه تنها توی برنامه نویسی فرانت اند بلکه در هر محیط توسعه ای که قراره یک سری کار مشترک بر روی یک سرویس انجام بشه، می تونه به کار برنامه نویس بیاد و معمولا برنامه نویس ها بسته به نیازشون یک متد wrapper می نویسن و در پروژه هاشون ازش استفاده می کنن. برای جاوا اسکریپت آمادش هستبرای جاوا اسکریپت یک ابزاری با اسم JS Service Wrapper آماده کردم. تا نیازی که داریم رو پوشش بده. این ابزار بر پایه Promise هست و حتی یک ساختار صف هم براش در نظر گرفتم برای مواقعی که لازم میشه سرویس هامون در یک صف و به نوبت اجرا بشن. همچنین فرقی نمیکنه که محیط توسعه تون مرورگر باشه یا NodeJS این ابزار در هر دو جواب میده.یک مثال کامل از کد: https://gist.github.com/behnamazimi/945d6b7b98bfdd104760c00d74346b55 خروجی مثال بالا به شکل زیر خواهد بود: https://gist.github.com/behnamazimi/8e70001c232edf257843d913bb025d30 در مثال بالا، سه تا سرویس فراخوانی شده. هر کودوم شناسه منحصر به فرد دارن ولی عدد اول شناسه جایگاه هر سرویس در صف رو نشون میده. همونطور که در قسمت نتایج می بینید، همه ی سرویس ها به نوبت وارد صف فراخوانی شدن. وقتی اولین سرویس وارد صف شده، فوری فراخوانی شده چون اولین سرویس در صف بوده. سرویس دوم بعد از وارد شدن سرویس اول وارد صد شده. ولی چون نوع سرویس موازی (parallel) نبوده پس باید منتظر میمونده تا نوبت بهش برسه. بعد از سرویس دوم هم، سرویس سوم که تنها سرویس نوع موازی هست وارد صف شده و چون نوعش موازی بوده فوری فراخوانی شده. در این لحظه همه ی سرویس ها وارد صف شدن. وقتی سرویس اول به نتیجه میرسه resolve میشه و از صف حذف میشه و نوبت میرسه به فراخوانی سرویس دوم که در حالت انتظار بود. هر کودوم از سرویس ها بعد از اتمام اجراشون از صف حذف میشن. در ابتدای مثال سه بار متد setHook برای ServiceWrapper فراخوانی شده، توابعی که به عنوان پارامتر دوم در هر متد ارسال شده در موقعیت مناسب بر روی تمام سرویس ها اجرا شدن. چطور باید توی پروژتون استفاده کنید؟توضیحات کامل در مورد نحوه استفاده و تنظیمات مربوط به کد رو در فایل readme پروژه نوشتم که در Github می تونید مطالعه کنید. پروژه Githubسوالی داشتید در خدمتم. بهنام عظیمی بهنام عظیمی Wed, 03 Jun 2020 18:09:15 +0430 https://virgool.io/@bhnmzm/display-contents-%D8%AF%D8%B1-css-%D8%B3%D8%B1%DB%8C-%D9%86%D9%88%D8%AA-%D9%87%D8%A7%DB%8C-%D9%85%D9%86-re2q0synkkds سلام دوستان. از چند وقت پیش تصمیم گرفتم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم و این دومین مطلب از این سری هست که براتون آماده کردم. (مطالب قبلی این سری رو میتونید در پایین این مطلب ببینید)ویژگی display توی CSS مشخص میکنه که عنصر (element) چطور ساخته و رندر بشه. میدونید که هر نود (node) در html یک جعبه ی مستطیل شکل هست. این جعبه از اجزای مختلفی تشکیل شده که میشه به دو فضا تقسیمشون کرد. یکی فضای border, padding, margin و دومی هم فضایی که محتوا عنصر در اون قرار داده میشه.تقسیم فضای عنصروقتی به یک عنصر ویژگی display:contents میدیم، عملا از موتور چیدمان میخوایم که باکسی که قراره برای المنت بسازه رو محدود به عناصر داخلی و محتوای اون المنت کنه و بخش border, padding, margin رو حذف کنه/رندر نکنه.با یک مثال ادامه میدم توضیحات رو، در زیر دو تا div داریم (آبی و سبز)، و هر دو دیو، padding margin و border یکسان دارن. قراره به div والد display:contents بدیم.دو باکس بدون اعمال display:contentsنتیجه ای که به دست میاد رو در تصویر زیر میتونید ببینید (خط قرمز خارجی فقط برای جدا کردن تصویر از پس زمینه است). همونطور که مشاهده میکنید باکس خارجی محدود شد به محتوای داخلش که در این مثال میشه یک نود متنی "باکس خارجی" و یکی هم باکس سبز رنگ داخلی.دو باکس بعد از اعمال display:contents بر روی باکس خارجیویژگی display: none هم تا یه جایی شبیه به display: contents جلو میره ولی تفاوت اصلیش اینه که وقتی یک المنت display: none هست، کلا از درخت رندر کنار گذاشته میشه و عناصر داخلش هم رندر نمیشه.بالاتر هم اشاره کردم که وقتی عنصری ویژگی display: contents داره، ویژگی های border، padding، margin و تمام ویژگی های غیر ارثی (ویژگی هایی که امکان انتقالشون به عناصر داخلی وجود نداره) رندر نمیشن. مثلا ویژگی های چیدمان عنصر مثل position یا z-index یا مثلا ویژگی های مربوط به سایز و پس زمینه عنصر. ولی در عوض ویژگی های ارثی روی باکس عنصر هدفمون اعمال میشه. برای مثال ویژگی هایی مثل visibility، ویژگی های list، ویژگی های مربوط به چیدمان مثل text-align، تمام ویژگی های مربوط به فونت و غیره همچنان رندر میشه.تغییراتی که ویژگی display:contents در عنصر ایجاد میکنه ظاهری هست و در حد خیلی ناچیزی منطقش رو ممکنه تغییر بده پس روی attribute ها و رویداد های عنصر اثری نمیزاره. فقط یک نکته وجود داره که اونم با استفاده از مثال بالا براتون توضیح میدم.فرض کنیم من برای باکس خارجی (در مثال بالا) یک رویداد کلیک اضافه کردم، تا وقتی ویژگی display:contents رو به باکس خارجی ندادم، هر جاش که (هر دو قسمت آبی و سبز در تصویر) کلیک کنم اون رویداد صدا زده میشه. ولی بعد از دادن ویژگی display: contents باکس من به وسعت و بزرگی اولش نخواهد بود و ممکنه یه فضاهایی رو به خاطر چیدمان عناصر داخل از دست بدم (تصویر پایین; قسمت های هاشور خورده فضای از دست رفته است)، پس نباید انتظار داشته باشیم که با کلیک روی قسمت هایی که جزئی از باکس ما نیست رویداد کلیک ما صدا زده بشه.فضای باکس بعد از display:contentsو اما به چه دردی میخوره؟وقتی میخواید عناصرتون بدون تغییر ساختار html ای که دارن، به صورت مستقیم در یک عنصر گرید یا یک فکس و یا هر container دیگه ای شریک باشن و به عنوان sibling (خواهر برادر) در اون container باشن، از display:contents استفاده کنید.در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.انیمیشن فرار - حس خوبی که مدیون CSS اممربع بدون ارتفاع - سری نوت های CSS منمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Thu, 28 May 2020 00:14:33 +0430 https://virgool.io/@bhnmzm/escape-loading-animation-css-z8zoqpeageaf سلام دوستان؛ امیدوارم حالتون خوب باشه.امروز داشتم توی Dribbble می گشتم که به یک انیمیشن لودینگ باحال برخوردم. از اون انیمیشن های لوپی که وقتی میری بهرش دیگه نمیتونی دربیای! فکر کنم ده دوازده دقیقه فقط خیره شده بودم به جیفش و هی حالم خوب تر و خوب تر میشد. (همین جیف پایینی)لودینگ انیمیشن cssاین طرح رو آقای Vitaly Silkin (طراحش) حدود دو سال پیش توی پروفایل Dribbbleاش منتشر کرده. خلاصه تصمیم گرفتم کدش کنم. تقریبا 3 و نیم ساعت وقت گذاشتم براش و واقعا لذت بخش بود. کلا با CSS خالی کد زدم و به مجموعه پروژه های کاربردی فرانت اند اضافه کردم. نتیجه کار رو در این لینک میتونید ببینید. و همچنین میتونید پروژه رو در Codepen هم ببینید.آخرسر هم به آقای Silkin ایمیل زدم و بخاطر طرح قشنگی که زده ازش تشکر کردم و البته براش نوشتم که امیدوارم بخاطر اینکه بدون اجازه طرح رو کد کردم ازم دلخور نباشه. آخر ایمیل هم نوشتم دوست بالقوه ات بهنام!بعضا جمله ها، طرح ها و قصه های خیلی ساده میتونه بیش از چیزی که انتظار داریم خوشحالمون کنه. مخصوصا توی این روزای سخت، وسط این همه مشغله و کارهای روزمره و مسئولیت هایی که گردنمونه. در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Sun, 03 May 2020 03:43:29 +0430 https://virgool.io/@bhnmzm/%D9%85%D8%AC%D9%85%D9%88%D8%B9%D9%87-%D9%BE%D8%B1%D9%88%DA%98%D9%87%D9%87%D8%A7%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87%DB%8C-%D9%88%D8%A8-t14zbhgnzphs چند ماه پیش تصمیم گرفتم روی یک مجموعه پروژه برای وب کار کنم که هم بتونم توی دوره هام ازش استفاده کنم و هم اینکه بصورت عمومی منتشر کنم. کارو شروع کردم و نتیجه اش شد یک پروژه با عنوان practical-front-end-projects در Github.بروزرسانی در 12 فروردین 99: پروژه جدید اضافه شدهمونطور که از اسم پروژه پیداست، یک مجموعه از پروژه های کاربردی front-end که برای علاقه مندان و دوستانی که تازه شروع کردن توسعه دادم. هدف اصلی آموزش هست و دوستانی که نیاز دارند می تونن از کدها در هر جایی استفاده کنند.مجموعه پروژه‌های ساده‌ی وب چند تا نکته:توی پروژه ها از ابزارهای باندلینگ استفاده نشده.از کتابخانه های مجزا استفاده نشده.کدهایی پروژه ها فقط روی مرورگرهای بروز قابل اجراست.پروژه ها فقط برای اهداف آموزشی استپروژه ها:فعلا 6 پروژه از این مجموعه توسعه داده شده که در زیر لیست کردم. توضیحات کامل رو میتونید در صفحه Github مطالعه کنید.Web Chat AppCustom Video PlayerLovely MoviesNote AppOthello Board GameQuiz AppSimple Range Sliderاجرای پروژه ها روی سیستمبرای اجرای پروژه ها توی سیستم خودتون کافیه پروژه رو از Github دانلود و یا clone کنید، پوشه هر پروژه رو باز کنید و روی index.html کلیک کنید و توی مرورگر باز کتید. همونطور که در بالا اشاره کردم، از هیچ باندلری استفاده نکردم و همه ی اسکریپت ها مستقیم توی HTML و با تگ لود میشن.در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Sun, 22 Mar 2020 21:52:53 +0430 https://virgool.io/@bhnmzm/%D9%85%D8%B1%D8%A8%D8%B9-%D8%A8%D8%AF%D9%88%D9%86-%D8%A7%D8%B1%D8%AA%D9%81%D8%A7%D8%B9-%D8%AF%D8%B1-css-pz4voxesxwaf سلام دوستان. از چند وقت پیش تصمیم گرفتم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم و این دومین مطلب از این سری هست که براتون آماده کردم.مطلب قبلی:سایه رنگی با کمی خلاقیتتوی پروژه ها بعضی وقتا لازم میشه که ارتفاع (height) یک عنصر هم اندازه با عرض (width) اون باشه و زمانی که عرض رو متغیر در نظر بگیریم پیاده سازی این مورد واقعا دردناک میشه. ?برای حل این مورد میتونیم از شبه عناصر (psuedo-elements) استفاده کنیم. کد زیر رو نگاه کنید: https://gist.github.com/behnamazimi/0ca2951c44c975a90687e97bc1dbf785 من عرض کلاس square رو 100% در نظر گرفتم و به عنصر after اش ویژگی padding-top:100% رو اضافه کردم. با این کار عنصر after به اندازه عرض عنصر اصلی ارتفاع میگیره و از اونجایی که عنصر after در داخل square قرار داره، ارتفاع square هم به همون اندازه بیشتر میشه.حالا شاید براتون سوال باشه که چرا ویژگی padding-top باید از عرض square تاثیر بگیره؟ خوب جوابش سادست، چون اینطوری سیاست گذاری و تعریف شده. :) در واقع مقداری که به ویژگی padding میشه داد، یا یک مقدار ثابت هست و یا یک مقدار درصدی. در مقادیر ثابت ( مثل px, rem, em) که اندازه مشخص هست و بحثی درش نیست. ولی در اندازه های درصدی (مثل چیزی که ما در مثال داریم)، اندازه با توجه به عرض عنصر والد محاسبه میشه. حتی برای padding-top و padding-bottom. توضیحات بیشتر رو اینجا میتونید مطالعه کنید.البته به این موضوع دقت کنید که اگر عنصر دیگه ای غیر از after داخل square باشه، ارتفاع اونا هم به ارتفاع کل square اضافه میشه.در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSبررسی iterable و iterator در جاوا اسکریپتامیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Sun, 01 Mar 2020 14:38:00 +0330 https://virgool.io/@bhnmzm/%D8%B3%D8%A7%DB%8C%D9%87-%D8%B1%D9%86%DA%AF%DB%8C-%D8%A8%D8%A7-%DA%A9%D9%85%DB%8C-%D8%AE%D9%84%D8%A7%D9%82%DB%8C%D8%AA-%D8%B3%D8%B1%DB%8C-%D9%86%D9%88%D8%AA-%D9%87%D8%A7%DB%8C-css-%D9%85%D9%86-istgb28hhgcr سلام دوستان. قصد دارم یه دستی به سر و روی نوت های CSS ام بکشم و به عنوان مطالب کوتاه باهاتون به اشتراک بزارم. سایه رنگی با کمی خلاقیت اولین یادداشت از سری یادداشت های CSS من هست که آماده کردم. امیدوارم لذت ببرید و نظرتون رو حتما بنویسید که بدونم باید ادامه بدم یا نه. :) هدفم ایجاد سایه رنگی برای یک باکس مطابق با رنگ بندی خودش هست. یعنی به جای اینکه از box-shadow معمولی استفاده کنم از یک روش متفاوت استفاده کردم. https://gist.github.com/behnamazimi/99456340dd0f14dc80ac25cb72b12ed2 در واقع کار سختی انجام نشده. من از ارث بری ویژگی ها و همینطور شبه عناصر (psuedo-elements) در CSS استفاده کردم.عنصر before کلاس box رو دقیقا هم اندازه با خود box ایجاد کردم و position اش رو absolute قرار دادم. و طوری که میخوام موقعیتش رو تنظیم کردم. پس زمینه رو از عنصر مادر، یعنی کلاس box ارث بری کردم و در نهایت هم یک فیلتر بلور (blur) براش اعمال کردم.نتیجه رو در تصویر پایین می بینید، دقیقا همان طوری که بک گراند کلاس box یک گرادیان از رنگ سیاه به قرمز هست، سایه هم دقیقا با همون رنگ ها درست شده.سایه رنگی با کمی خلاقیتتنها مشکلی که این کد داره اینه که css-filters و در نتیجه ویژگی filter توسط Internet Explorer و Opera Mini پشتیبانی نمیشه.امیدوارم لذت برده باشید. خوشحال میشم منو در توییتر دنبال کنید. :) بهنام عظیمی بهنام عظیمی Thu, 27 Feb 2020 23:06:26 +0330 https://virgool.io/coderlife/%D9%85%D8%AD%DB%8C%D8%B7-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-%DB%8C%DA%A9-front-end-%DA%A9%D8%A7%D8%B1-%D8%A2%D8%B4%D9%86%D8%A7-%D8%A8%D8%A7-back-end-%D8%AF%D8%B1-%D8%A7%D9%88%D8%A7%DB%8C%D9%84-%D8%B3%D8%A7%D9%84-2020-ngxcrqpd74gd سلام دوستان. من بهنام ام. تقریبا از سال 2012 در زمینه توسعه وب فعالیت دارم و میشه گفت همه چیزایی که یاد گرفتم به صورت خودآموز بوده. با اینکه تمرکزم بیشتر روی سمت مهندسی فرانت اند بوده ولی دستی هم توی بک اند دارم و چند سالی رو به عنوان توسعه دهنده همزمان بک اند و فرانت اند کار کردم. توی این مطلب قصد دارم در مورد برنامه ها و ابزارهای کاربردی، محیط توسعه و پلاگین هایی که هر روز باهاشون سروکار دارم بنویسم. امیدوارم که براتون مفید باشه.محیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020مطلب رو به چند بخش تقسیم کردم و تک تک توضیحشون رو دادم.سیستم عاملمن از ابتدا کاربر Windows بودم و الانم با نسخه 10 ویندوز کد نویسی میکنم. یک زمانی برای اینکه از دنیای لینوکس عقب نمونم، لینوکس و ویندوز رو باهم داشتم ولی محیط توسعه فعلی که استفاده میکنم، ویندوز هست. البته WSL رو هم کنارش استفاده میکنم که در ادامه توضیح دادم.نرم افزارهای کاربردی منوقتی یک نفر زمان خیلی زیادی رو پشت سیستم باشه، قطعا یک سری از نرم افزارها رو به عنوان نرم افزارهای کاربردی ستاره میزنه و توی هر بار تعویض/رفرش سیستم عامل، اول سراغ اونا میره. من هم برنامه های خیلی زیادی رو ستاره زدم ولی اینجا فقط اونایی رو میگم که توی مسیر توسعه کد زیاد به دردم میخورن.برنامه Comfort Clipboard Manager: بدون شک بهترین و کاربردی ترین برنامه ای هست که میتونم برای دوستان برنامه نویس معرفی کنیم، برنامه مدیریت ClipBoard که به کمکش میتونید تاریخچه ای از حافظه کلیپ بوردتون رو ببینید و هر موقع که نیاز داشتید دوباره از مواردی که قبلا کپی کردید استفاده کنید (paste کنید). البته برنامه های مشابه زیادی هست که میشه به جای این برنامه استفاده کرد و بستگی به سلیقه کاری شما داره. و به نظر من مهم اینه که حتما یک برنامه مدیریت clipboard بر روی سیستمون وجود داشته باشه.برنامه f.lux: برنامه تنظیم روشنایی صفحه. این برنامه تنظیماتی داره که میتونه شفافیت صفحه رو با توجه به ساعت شبانه روز و موقعیت شهری که انتخاب میکنید به صورت خودکار تنظیم کنه.برنامه Everything: این برنامه جایگزین بسیار خوبی برای سرچ خود ویندوز هست، با این برنامه میتونید با سرعت خیلی بالایی در فایل هایتون جستجو کنید. امکان جستجو در مسیر سفارشی و نوع فایل های مختلف هم بهتون میده.ویرایشگر کد (IDE)من به عنوان IDE محیط های Intellij رو دوست دارم و از Intellij WebStorm و Intellij PhpStorm استفاده میکنم ولی همیشه Visual Studio Code رو هم کنارش دارم و از اولین نسخه اش آپدیت هاش رو دنبال کردم و کلی کیف کردم. :)قطعا VSC خیلی سبک تر هست و بسته به نیاز پروژه است که من تصمیم میگیرم کدام پروژه رو در کدام IDE باز کنم. از طرفی Intellij همه چیز رو توی خودش داره و نیازی نیست با پلاگین ها و افزونه های زیادی سروکله بزنیم.افزونه هایی من در VSC:ESLintEJS SnippetsGistPadCSS FormatterMarkdown All in OneMaterial Icon ThemePath IntellisensePettier - Code fromatterRemote - WSLVisual Studio IntelliCode&amp;lt;br/&amp;gt;افزونه های Intellij من:GitToolBoxImport CostJS GraphQL.ignoreمرورگرمن از Google Chrome استفاده میکنم. :)البته کنارش مرورگرهای FireFox، Opera، Edge و Tor (?) رو هم دارم، چون فرانت اند کار میکنم و باید تست کنم. و البته به Internet Explorer هم مجبورم :(افزونه های Chrome من:JSON Formatter: فرمت کردن فایل ها و نتایج JSON در مرورگر30 Seconds of Knowledge: نیاز به توضیح نداره و استفاده ازش به شدت توصیه میشه.Awesome Screenshot: Screen Video Recorder : ضبط ویدئو و گرفتن اسکرین شات از صفحه مرورگرEmmet Re:view: کمک به طراحی ریسپانسیوRedux DevToolsReact Developer ToolsCustom JavaScript for websites 2: امکان اضافه کردن کد جاوا اسکریپت به سایت ها رو میدهCSSViewer: با این افزونه میتونید استایل های المنت ها رو به جزئیات ببینیدDark ReaderWappalyzer: ابزارها و تکنولوژیهایی که در توسعه یک سایت استفاده شده رو بهتون نشون میدهBuiltWith Technology Profiler: ابزارها و تکنولوژیهایی که در توسعه یک سایت استفاده شده رو بهتون نشون میدهEye Dropper: انتخاب رنگ از صفحه وبAlexa Traffic RankPicture-in-Picture Extension (by Google): اینم توضیحش زیاد میشد، خودتون نصب کنید و لذت ببرید. توصیه میشه.AdBlock — best ad blocker: برای بلاک کردن تبلیغات مزاحم، زشت و بد. به شدت توصیه میشه اگه ندارینش.کنترل ورژن (VSC)برای کنترل ورژن من از git استفاده میکنم. سرویس دهنده هم زیاد فرقی نمیکنه ولی ترجیح من gitlab.com هست. بیشتر به این ظاهر کاربریش. :)شما میتونید به جای gitlab از github یا bitbucket هم استفاده کنید و البته به جای git هم میتونید از Mercurial و یا Apache Subversion (SVN) استفاده کنید و انتخاب هر کودوم بستگی به سلیقه شخصی و نیازهای شما داره.توسعه بک اند (Back-End Development)برای توسعه بک اند من از زبان PHP استفاده میکنم، اوایل Native مینوشتم ولی بعد از مدت کوتاهی به استفاده از فریمورک ها رو آوردم. تمرکزم بر روی Laravel بوده و با نسخه 5 به بعدش کار کردم. از طرفی در بعضی پروژه هام با سیستم مدیریت محتوای wordpress و هم کار میکنم.از طرف دیگه در Node.js با فریم ورک های Adonis و کمی هم Express کار میکنم. علت اینکه Adonis رو انتخاب کردم، شباهت ساختارش با Laravel بود و اینطوری تونستم بدون گذاشتن وقت زیاد برای یادگیریش باهاش کار کنم.البته در توسعه بک اند نیازهای پروژه خیلی تاثیر گذارند و تصمیم در مورد تکنولوژی ها بعد از نیازسنجی انجام میشه و انتخاب پایگاه داده هم به این موضوع بستگی داره ولی من به شخصه با MySQL راحتم ولی MongoDB رو هم دوست دارم. :)برای ارتباط ثالث از پروتوکل Rest (Restful API) استفاده میکنم و البته بسته به نیازم به طرف WebSocket هم رفتم.خیلی وقتا زور زدم که از Docker استفاده کنم ولی تا الانش هم نتونستم در یک پروژه واقعی ازش استفاده کنم.توسعه فرانت اند (Front-End Development)در توسعه فرانت اند، ابزارها و فریم ورک های خیلی زیادی رو میشه استفاده کرد و باز بسته به نیاز پروژتون باید در موردشون تصمیم بگیرید. ولی من همه چیزهایی که باهاشون درگیرم رو اینجا لیست میکنم:‌‌VanillaJS: جاوا اسکریپت خالی! برای توسعه front-end نیازی ندارید حتما از یک فریم ورک استفاده کنید. با یادپیری دقیق خود JS قادر به پیاده سازی هر چیزی خواهید بود.HTML/CSS: نیاز به توضیح نیست.SASS: یک پیش پردازنده CSS که ویژگی هایی اضافه تر از CSS خالی داره و در نهایت به CSS کامپایل میشه.Babel js: یک کامپایلر برای جاوا اسکریپتUI Framework:ReactJsSvelteJSMaterial UISemantic UI و Semantic UI ReactPolymerJSNextJS: برای رندر سمت سرور SSRابزارهای باندلینگ:Create React App: کمک میکنه که یک پروژه react رو بدون تنظیمات ایجاد کنید.Webpack: مشهورترین اباز باندلینگ که هر فرانت اند کاری روزی به گیرش میفته!Gulp: به نظر من ساده و قدرتمند. یک سال بعد از Webpack (2013) معرفی شد و طرفدارای زیادی هم پیدا کرد.Parcel-bundler: تازه چند هفته است با این معجزه آشنا شدم و کارم خیلی راحت شده. فعلا که عزیزترینه پیش من.Rollup: رول آپ هم راحته و نیاز نیست زیاد باهاش درگیر بشید و من توی باندلینگ پک های react ازش استفاده میکنم.ابزارهای ارتباطی و مدیریت پروژهباید توجه کنید که این موارد بیشتر سیاست های شرکتی که در اون کار میکنید مشخص میشه و با معمولا همشون اوایل عجیب به نظر میان ولی در کل بعد از چند روز کار باهاشون متوجه میشین که همشون یک هدف رو دنبال میکنند و تفاوت چندانی با هم ندارن.راه های ارتباطی من:ایمیل: ایمیل رو برای ارتباط های رسمی تر و مهم استفاده میکنم.تلگرام: معمولا همیشه آنلایه روی سیستم و به عنوان Cloud Storage و راه ارتباطی ارش استفاده میکنممواتس اپ: عین Internet Explorer میمونه برام، بهش مجبورم! :(اسلک (Slack): برای ارتباط های تیمی بد نیست ولی پولی بودنش یکم روی اعصابه. مخصوصا این که تاریخچه پیام هاش برای اکانت ویژه فعال هست و کاربر معمولی تاریخچه اش محدود به چند روز و یا چند پیام هست.ابزارهای مدیریت پروژه:تریلو (Trello): دوست داشتنی کلاسیک. تعداد تسک هایی که توی trello اضافه کردم و بعد از مدتی حذف کردم نزدیک به بی نهایت هست :Dجیزا (Jira): پیچیدگی های خودش رو داره و در نهایت بهش عادت میکنید.وب سرور مجازیبرای این مورد از XAMPP استفاده می کنم. باهاش سرور مجازی Apache روی سیستم راه اندازی میکنم. برای تمام نسخه های PHP هم فایل نصبی داره و یا میتونید خودتون ورژن PHPاش رو تعییر بدید. از طرفی MySQL و phpmyadmin رو هم همراه خودش داره.من نسخه portable اش رو توصیه میکنم چون موقع حین تعویض/رفرش ویندوز مشکلی پیش نمیاد باهاش.ماشین مجازی (Virtual Machine)ویندوز حدود سه سال پیش یک ویژگی به اضافه کرد با عنوان Windows Subsystem for Linux که بدون نیاز به درگیری های زیاد میتونی یکی از توزیع های لینوکس رو داخل ویندوز داشته باشی. حدود یک سالی هم هست که دارم از این ویژگی استفاده میکنم و بسیار هم کاربردی هست. مخصوصا اینکه با افزونه Remote - WSL که بالاتر برای Visual Studio Code لیست کرده بودم، میتونید به این توزیع وصل بشید و ازش به عنوان محیط توسعتون هم استفاده کنید. خیلی مجلسی و شیک :)از طرف دیگه برنامه ای که در صورت نیاز ازش استفاده میکنم VirtualBox هست.هاستینگ و سرورحدود 4 سال مشتری میهن وب هاست بودم و ازشون راضی بودم. ولی VPS هاشون زیاد قابل تعریف نیست. ولی از لحاظ قیمت و پشتیبانی خوب هستن.حدود 2 سالی هم هست که دارم با سینداد همکاری میکنم، از سرویسی که ازشون میگیرم کاملا راضی ام. تا الان 6 تا VPS ازشون تهیه کردم و به هیچ مشکلی برنخوردم. به جز موارد کوچیک که پشتیبانیشون خیلی خوب عمل کردم در اون موارد هم.آنالیز و سئو (SEO & Analytics)من هم مثل همه توسعه دهنده های وب، دوست دارم نتیجه کارم رو تست کنم و برای اون از ابزارهای زیر استفاده میکنم.GTmetrixW3 ValidatorWebPageTestGoogle AnalyticsGoogle Page SpeedGoogle Search Console&amp;lt;br/&amp;gt;پک های npm که خیلی به کارم میان:yarn: به جای دستور npm ازش استفاده میکنمcloc: برای شمارش تعداد خط کدی که توی پروژه نوشتم به کارم میاد.npm-check-updates: برای بروزرسانی dependency های پروژه که توی package.js هست به کار میبرم این پک رو. در واقع بهم نشون میده که کودوم پک آپدیت شده و اگر بخوام میتونم dependency های پروژه رو به صورت اتوماتیک بروزرسانی کنم.بعضی از لینک ها و ابزارهای به درد بخور:CodeSandbox: ویرایشگر کد آنلاین برای فرانت اند.Play.io: ویرایشگر کد آنلاین برای فرانت اندLeaf DNS: بررسی DNSBit.dev: مرجع کامپوننت های آمادهIcoMoon: وب اپ ساخت فونت آیکن با SVGفرازین: ترجمه متون فارسی به انگلیسی و انگلیسی به فارسی که دقیق تر از گوگل و یا بینگ و هر مورد مشابه دیگه ای کار میکنهTinypng.com: فشرده سازی آنلاین تصاویر. که متاسفانه کاربرای ایرانی رو تحریم کرده.دنیای کد نویسی و توسعه واقعا دنیای پیچیده و جذابی هست و من توی این مطلب قصد داشتم یه سری سوالات در ذهن دوستان علاقه مند به این موضوع ایجاد کنم و البته به یک سری سوال هم جواب بدم. مطلب تقریبا بلندی از آب درآمد ولی با این حال بسیاری از موضوعات رو پوشش نداده و نیاز هست که خودتون دست به کار بشید.سعی کردم برای یک سری از موارد توضیحات بنویسم ولی قطعا کافی نیست توضیحات و حتما باید خودتون هم گوگل کنید و دنبال موارد مشابه و یا توضیحات تکمیلی باشید. برای موضوعاتی هم که توضیحی ننوشتم به منبعش لینک دادم که میتونید از اون استفاده کنید.این مطلب خلاصه ای از تجربیات و درگیری های شخصی من هست و این به معنی بی عیب و نقص بودن انتخاب های من نیست. با گذشت زمان و تغییر ابزارهای و تکنولوژیهایی که استفاده میکنم این مطلب رو هم آپدیت خواهم کرد. خوشحال میشم نظرات و پیشنهاد هاتون رو در مورد مطلب بخونم. میتونید منو در توئییتر دنبال کنید و خوشحال میشم مطلب رو با دوستانتون هم به اشتراک بگذارید. همیشه شاد باشید. بهنام عظیمی بهنام عظیمی Wed, 22 Jan 2020 18:38:15 +0330 https://virgool.io/Rocket/js-iterables-qvmlfohmzgev توی این نوشته تکرارپذیر (iterable) و تکرار شونده (iterator) در جاوا اسکریپت رو بررسی کردم. البته در کنار این مباحث، به موارد دیگه ای هم اشاره کردم و اینکه سعی کردم بیشتر از توضیح، کد ببینید.تکرارپذیر شوندگان! بررسی iterable و iterator در جاوا اسکریپتپیش نیاز: شما باید از قبل با مفاهیم اولیه جاوا اسکریپت مثل شیء، آرایه و حلقه آشنا باشید.نکته: در طول متن خروجی های هر کد رو با :o// نشون دادم.بیاید با یک مثال شروع کنیم. https://gist.github.com/behnamazimi/b65372122d232ffd10448a04bc183b30 در مثال بالا آرایه data یک تکرارپذیر (iterable) است. توی جاوا اسکریپت همه چیز تکرارپذیر نیست ولی اکثر موجودیت ها به صورت پیش فرض این ویژگی رو دارن. تنها تکرارپذیر های مادرزاد جاوا اسکریپت آرایه ها و شبه آرایه ها (Array-likes) هستن و for...of فقط روی اینا قابل اجراست.شبه آرایه ها Object هایی هستند که از آرایه بودن فقط سیستم دسترسی ایندکسی و ویژگی length بهشون رسیده. Strings، TypedArray، Map، Set و یا یک لیست از DOM Node ها شبه آرایه های JS هستند.میشه اینطوری توضیح داد که یک تکرارپذیر (iterable) ساختار داده ای هستش که امکان دسترسی متوالی به عناصر داخلیش رو بهمون میده و وقتی داخل حلقه for...of قرار اجرا میشه، تک تک عناصرش رو برامون برمیگردونه.هر iterable دارای یک ویژگی (peoperty) به اسم iterator (تکرارشونده) است. iterator یک نشانگر است که بر روی عناصر حرکت میکنه تا اون توالی رو ایجاد کنه.حرکت iterator بر روی عناصر به این صورت است که هر iterator یک متد از پیش تعریف شده به اسم next داره. در هر بار فراخوانی این متد، iterator مقدار عنصری که روی اون قرار داره رو به شکل `{value:..., done:true/false}` برمیگردونه و میره روی عنصر بعدی.در این Object که از فراخوانی next به دست میاد، value مقدار عنصر فعلی که نشانگر (iterator) بر روی اون قرار داره هستش و done هم نشون میده که iterator به انتهای حلقه رسیده یا نه.در ادامه ساختار داده ای که بالاتر بهش اشاره کردم رو شبیه سازی کردم. یعنی یک تکرارپذیر شونده ساختم :دی https://gist.github.com/behnamazimi/564411c371d10e480fd6f956247594cf#file-iterables-code-02-js الان برای ساختاری داده ای که در بالا نوشتم، میتونیم next رو صدا بزنیم و باعث حرکت رو به جلوی توالی بشیم. برای مثال میتونیم اون رو داخل یک حلقه به کار ببریم. مثل این: https://gist.github.com/behnamazimi/2b6deb3090dc61873636aad31eee6ec0#file-iterables-code-03-js و یا میتونیم خارج از حلقه و هر موقع که خودمون خواستیم next رو صدا بزنیم و توالی عناصر دادمون رو ادامه بدیم. مثل این: https://gist.github.com/behnamazimi/e952905d8dcef0e1343eadfebc088510#file-iterables-code-04-js مکانیزمی که حلقه ی for...of داره اینه که تا وقتی که مقدار done مساوی با true نشه تکرار (فراخوانی متد next) رو ادامه میده. یعنی مثل چیزی که توی مثال حلقه while در بالا انجام دادیم.تا الان با مفهوم و ساختار iterator آشنا شدیم و یک ساختار داده تکرارپذیر درست کردیم و منطق حلقه رو براش پیاده کردیم. این عمل برای iterator های build-in جاوااسکریپت هم تقریبا مثل کاریه که من توی مثال انجام دادم. اما اگه بخوایم از for...of برای ایجاد حلقه روی ساختار دادمون استفاده کنیم چی؟ یعنی مثل این: https://gist.github.com/behnamazimi/be35b5f133e703c991818a0e4f211663#file-iterables-code-05-js نتیجه ای که کد بالا بهمون میده یک خطاست. یک خطا با این عنوان که "data تکرارپذیر نیست!" ولی چطور ممکنه؟! ما که ساختار دادمون توالی داره و حتی تونسته بودیم از اون توالی استفاده کنیم!پارانتز باز:با Symbol چقدر آشنایی دارید؟ اینجا قصد ندارم Symbol رو کامل براتون شرح بدم ولی یه نکاتی هست که قبل از ادامه باید بهش اشاره بکنیم. اگر بخواید میتونید از این قسمت رد بشید.symbol یک نوع داده اولیه است. مثل String یا Number یا Boolean.هر سمبلی که از فراخوانی Symbol() برگردونده همیشه منحصر به فرد (unique) است. یعنی جاوا اسکریپت unique بودن تمام symbol هارو تضمین میکنه. در واقع هیچ سمبلی نمیتونه وجود داشته باشه که حتی با یک سمبل دیگه برابر باشه.هر سمبل میتونه یه توضیح هم داشته باشه که همیشه همراهش دیده میشه ولی اینکه دو سمبل توضیح یکسان داشته باشند دلیل بر برابر بودنشون نیست. https://gist.github.com/behnamazimi/fee81c70a07e1d688fb5f26c4e2ab834#file-iterables-code-06-js ار سمبل ها معمولا به عنوان شناسه property ها در Object استفاده میشه. برای مثال: https://gist.github.com/behnamazimi/0bd80df03d0f2d20fb073e83f8969b08#file-iterables-code-07-js در این مثال ما یک سمبل به اسم SymblOne تعریف کردیم و از اون به عنوان کلید یکی از property های آبجکتمون استفاده کردیم. الان فقط در صورتی که اون symbolOne رو داشته باشیم میتونیم به ویژگی هدف دسترسی داشته باشیم. در غیر این صورت اون ویژگی برامون غیر قابل دسترس خواهد بود. https://gist.github.com/behnamazimi/899fc2f4058a60e58971157236f05d83#file-iterables-code-08-js به کد بالا دقت کنید، من از یک سمبل به عنوان کلید استفاده کردم ولی دیگه به صورت مستقیم نمیتونم به اون داده دسترسی داشته باشم. راه غیر مستقیم دسترسی به دادمون هم استفاده از Object.getOwnPropertySymbols() هستش که یک آرایه از سمبل های تعریف شده داخل object رو برمیگردونه. مانند مثال پایین: https://gist.github.com/behnamazimi/fe2cc3565b7fe3300adab7a57aebac60#file-iterables-code-09-js سمبل های شناخته شدهبعضی از سمبل ها هم وجود دارند که جاوااسکریپت توی کد پایه خودش تعریف و استفاده کرده و در دسترس ما هم قرار داده. مثل Symbol.iterator و یا مثل Symbol.replace و خیلی سمبل دیگه که از هر جای کدمون صداش بزنیم، یک سمبل منحصر به فرد رو برامون برمیگردونه.همینقدر توضیح در مورد سمبل ها کافیه به نظرم. الان موضوع اصلیمون رو ادامه بدیم.پارانتز بسته!نکته اینجاست که جاوااسکریپت، یا بهتره بگم for...of توی ساختار داده ما دنبال متد next نمیگرده. بلکه به دنبال سمبل Symbol.iterator میگرده. چون توی کدبیسش کلید دسترسی به iterable هر ساختار داده ای را همین سمبل تعریف کرده. این یعنی چی؟! یعنی اینکه میشه به iterator همه ی iterbale های جاوااسکریپت به صورت مستقیم با استفاده از Symbol.iterator دسترسی داشت و بیرون از حلقه ها ازشون برای توالی روی عناصر استفاده کرد.اگر ما بخوایم توی مثال پیاده سازی ساختار داده که در بالا داشتیم، به جای متد next از سمبل Symbol.iterator استفاده کنیم، کد باید به شکل زیر تغییر بکند. https://gist.github.com/behnamazimi/d7b73237abdea4e48bc00aa7f2c7f609#file-iterables-code-10-js ولی اگه کد بالا رو در حلقه for...of بیارید دوباره خطا میده و اینبار خطا مربرط به متد next هست!نکته ای که باید بهش توجه کنید اینه که، iterator هر iterable یک تابع هست و فراخوانی اون تابع متد next رو برمیگردونه. بزارید مثال اول مقاله رو با استفاده از Symbol.iterable بازنویسی کنیم: https://gist.github.com/behnamazimi/34c3c3d49b0f41a053c29ef4bf2bb56f#file-iterables-code-11-js همونطور که مشاهده میکنید، ما iterator داده رو که یک تابع هست فراخوانی کردیم و نتیجه رو در `iterator` قرار دادیم. و در هر بار متد next اش رو صدا زدیم تا روی عناصر حرکت کنیم.پس با این حساب اگر بخوایم ساختار داده خودمون رو داخل حلقه for...of بزاریم، باید iterator اش متد next رو برگردونه و در نتیجه اجرای اون متد هست که توالی برقرار خواهد شد. به کد زیر دقت کنید. https://gist.github.com/behnamazimi/f34c3dc0110200c257f612338cbf8d37#file-iterables-code-12-js ولی! آیا این ساختار داده ای که نوشتیم کامل هست؟ آیا بهترین راه ایجاد یک تکرارپذیر همینه که ما نوشتیم؟پارانتز باز:Generator با Generator Function در جاوااسکریپتسال 2015، ES6 کلی استاندارد جدید برای JS ارائه کرد. حتی Symbol هم در این ورژن معرفی شد.یکی از ویژگی های مهم ارائه شده، روش جدید کار با توابع و تکرارشونده ها (iterators) بود. یعنی Generator ها.یک generator در واقع تایعی است که هر وقت بخوایم میتونیم متوقفش کنیم و دوباره هر وقت نیاز داشتیم از جایی که متوقف شده اجراش کنیم. در واقع Generator یک تابع با قابلیت تکرار هستش.برای تعریف یک Generator کافیه بعد از کلمه function یک ستاره (*) بزاریم. مانند function* myGenerator(){ // ...}و در داخل تابع، هر جایی که بخوایم یک توقف (pause) داشته باشیم، از yield استفاده میکنیم.فراخوانی هر Generator یک شئ برامون برمیگردونه که متد next جزئی از اون شی هست. و در هر بار فراخوانی متد next، یک Object شامل ویژگی های value و done رو برامون برمیگردونه. که value شامل عنصری است که نشانگر (iterator) بر روی اون قرار داره و done هم نشون میده که iterator به انتهای حلقه رسیده یا نه. (مثل چیزی که ما در ساختار داده خودمون پیاده کردیم.)به مثال زیر توجه کنید https://gist.github.com/behnamazimi/5a7dc5bb22ac1184f3b883ca66ff15dc#file-iterables-code-13-js همونطور که در بالا هم میبینید، نتیجه اجرای myGenerator یک شی با متد next برامون برمیگردونه و برای ایجاد توالی کافیه که متد next رو فراخوانی کنیم.پس ما میتونیم داخل generator به هر تعداد که لازم داشتیم yield انجام بدیم و در هر مرحله از فراخوانی متد next اجرای کد در یکی از اون yield ها متوقف میشه تا اینکه به آخرین yield برسه.پارانتز بسته.بزارید ساختار دادمون رو این بار با generator پیاده کنیم: https://gist.github.com/behnamazimi/067a4062174177740aece8aedb294632#file-iterables-code-14-js داخل generator بالا، گفتیم تا زمانی که pointerIndex به عنصر آخر نرسیده yield رو انجام بده. و در هر بار اجرای متد next این generator یک مقدار yield شده به عنوان value در شی `{value: ..., done: false}` برگشت داده میشه.تا این قسمت چیزی که میخواستم نشون بدم، قابلیت تبدیل کردن یک object به یک iterable بود. ولی مثالی که داشتیم با اینکه ساختار object داشت ولی داده هاش آرایه بود و خیلی راحت میشد روی اون آرایه for...of پیاده کرد چون خودش ذاتا تکرارپذیره. من فقط برای درک بهتر موضوع این مثال رو ترجیح دادم. درسته که در بعضی شرایط به شخصه از این نوع ساختار داده هم استفاده کردم، ولی دوست دارم یک مثال دیگه هم بنویسم که بیشتر با تبدیل object به iterable درگیر باشیم.فرض کنید اطلاعات کاربر رو در یک object مثل user داریم و میخوایم با قرار دادن object در for...of، هر property رو به صورت آرایه [key, value] برامون برگردونه. کدی که باید بنویسیم میتونه به شکل زیر باشه. https://gist.github.com/behnamazimi/0da04e8c45f7938e260718e5957caa2b#file-iterables-code-15-js ما در کد بالا، به ازای هر key از آبجکت user در هر بار حرکت توالی یک آرایه yield کردیم که عنصر اولش کلید ویژگی و اندیس دومش هم مقدار اون ویژگی در شیء ما هستش.توی این نوشته سعی کردم تکرارپذیری و به همراه اون چند تا موجودیت، تکنیک و ساختار، که شاید درکشون یکم پیچیده به نظر بیاد رو بررسی کنم و با مثال و به صورت عملی توضیح بدم. در کل مباحث مفهومی مثل این شاید در دید اول سخت به نظر بیاد ولی فهمیدن و درکش باعث میشه که برای خیلی از سوالاتتون جواب پیدا کنید و کلا سلسله مراتب و ساختار های مهم جاوا اسکریپت رو کنارش درک کنید.در هر یک از موارد اگر دیدید توضیح ها کافی نبوده و یا میشد بهتر از این هم به موضوعی پرداخت لطفا برام بنویسید که مطلب رو آپدیت کنم. سوالی هم بود در خدمتم.امیدوارم براتون مفید واقع بشه :)در ادامه چند تا از مطالب قبلیم رو هم لینک کردم. باعث افتخاره که بخونید و نظرتون رو بنویسید. سوالی هم بود در خدمتتون هستم.سه الگوی پر کاربرد در ReactJSچینش خاص عناصر در HTML اصلا سخت نیستمحیط توسعه یک Front-End کار آشنا با Back-End در اوایل سال 2020چند نکته خودمانی در مورد برنامه نویسی JS و ReactJSسایه رنگی با کمی خلاقیت - سری نوت های CSS منمربع بدون ارتفاع - سری نوت های CSS منبرای مطالعه نوشته هام منو در توییتر دنبال کنید. بهنام عظیمی بهنام عظیمی Fri, 27 Dec 2019 15:29:47 +0330 https://virgool.io/iran-react-community/%DA%86%D9%86%D8%AF-%D9%86%DA%A9%D8%AA%D9%87-%D8%AE%D9%88%D8%AF%D9%85%D8%A7%D9%86%DB%8C-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF-%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-js-%D9%88-reactjs-fiuvsxig1avi خیلی وقته در مورد چیزی ننوشتم و بعد از یه مدت طولانی تصمیم گرفتم در مورد کد تمیز وتجربیاتی که تو این چند سال کد نویسی و توسعه با JavaScript داشتم بنویسم. تو این مقاله تمرکزم رو بردم رو Clean Code و استاندارد های تعریف شده؛ البته با چاشنی تجربه شخصیم. مقاله برای React هستش ولی نکات اشاره شده جامع هستن و اکثرا محدود به React نیست. منظور از کد تمیز چیه؟ Martin Fowler توی کتاب Clean Code خودش یه توصیف جالب داره، میگه که: هر احمقی میتونه کدی بنویسه که یه کامپیوتر بفهمه، برنامه نویس های خوب کسایی هستن که کدهایی مینویسن که توسط آدما قابل فهم باشه! به نظر من این توصیف آخر توصیف کد تمیزه! چند وقت پیش هم در یک مقاله ای یه عبارت جالب رو دیدم، با این مضمون که: یه کدی بنویس که آخر هر روز با افتخار ببری و به مامانت نشون بدی! که البته این آخر روز برای اکثر ماها اول صبحه! :دی در نظر گرفتن این دو توصیف به خودی خود باعث میشه کدتون تمیز باشه. اینو بهتون قول میدم!کد نویسی تمیز زمانتون رو تلف نمی‌کنه!خیلی از دوستان برنامه نویسی که دیدم، میدونن که کد تمیز چیه و اهمیتش رو هم خوب میدونن فقط به اشتباه فکر می کنن که کد نویسی تمیز اتلاف وقته و روی چیزی که بهش عادت کردن تاکید می کنن! متاسفانه ترک عادت های قبلی در هر زمینه ای سخته و این کاملا قابل درکه. ولی نکته ای که باید بهش توجه کنید اینه که شما با ترک عادت کدنویسی کثیف یه عادت باحال تر رو صاحب میشید. کدنویسی تمیز ممکنه توی اوایل زمانتون رو بگیره ولی این زمان مثل سرمایه گذاری میمونه. تجربه ثابت کرده که این زمان با چیزایی که یاد میگیرید و موقع استفاده از عادت های جدید جبران میشه. در واقع عادت های جدید باعث افزایش سرعت کد نویسی و کاهش هزینه های نگهداری کدتون میشه. https://gist.github.com/behnamazimi/14a3fc27f811576aa94a5ef8823f1ef6 به مثال بالا توجه دقت کنید. مطمئنا شما به عنوان یک برنامه نویس JS با حالت اول یا همون Dirty Code مثال آشنا هستید و به احتمال زیاد قسمت های زیادی رو دارید همینجوری جلو میرید. و شاید براتون سخت باشه که به تمیز نوشتن عادت کنید و یا شاید بگید یادگیری اینا زمانبره (ایشالله تو پروژه بعدی حتما از اینا استفاده میکنم، یا به قولی ایشالله از شنبه...). ولی باور کنید و مطمئن باشید که مثلا داشتن یه فایل جدا واسه ثابت ها تو یه پروژه یا استفاده از توابع ES6/5 و یا نوشتن کامنت فقط اول ممکنه برای بعضی هاتون سخت باشه. به عبارتی فقط کافیه initialize بشید و تمام.کامنت ها صدای کد شما هستن!اگر میخواید پایه های کدتون قوی باشه حتما از کامنت استفاده کنید و برای هر قسمتی که لازمه توضیحات اضافه کنید. این کار از هدر رفت زمانتون در بلند مدت جلوگیری میکنه و باعث میشه هزینه های نگهداری هم پایین بیاد. در واقع باید اینو در نظر بگیرید که در آینده ای نه چندان دور، در بهترین حالت خودتون و در بدترین حالت یک نفر به جای شما، با کدتون درگیر خواهید بود. پس کاری نکنید که حتی خودتون هم نتونید از پس کدتون بربیاد. (حالا وای به حال نفر بعد شما!)نکته ای که باید بهش توجه کنید اینه که نوشتن کامنت برای همه قسمت های کدتون هم کار درستی نیست! لازم نیست برای قسمت های بدیهی کدتون توضیحی بنویسید. البته ممکنه قسمتی که برای شما بدیهی هست، به نظر یک نفر دیگه پیچیده بیاد و یا بر عکس این. هر چی تجربه توی کد نویسی بیشتر باشه کامنت گذاری ها هم استاندارد تر و به دردبخور تر میشن.به نحوه کامنت گذاری در کد زیر توجه کنید و دو تارو باهم مقایسه کنید لطفا. https://gist.github.com/behnamazimi/e3a2d57419d2699e1300f097c018e01e DRY کد بزنید ولی خطا نزنید! قراره کدهایی که مینویسیم ماژولار باشه تا راحت بتونیم در پروژه ها و ماژول های دیگه ازشون استفاده کنیم و از تکرار کد ها جلوگیری کنیم. این یعنی DRY.DRY مخفف Don’t Repeat Yourself هستش و چیزیه که هر برنامه نویسی باید رعایت کنه. DRY بودن باعث کاهش هزینه های نگهداری و البته کمتر شدن حجم کد میشه. به نظر من وسواس بیش از حد بر مفهوم DRY هم خوب نیست و پیچیدگی کد رو واقعا بالا میبره و خواناییش رو کمتر میکنه.کار با Component توی React در واقع کد نویسی DRY هستش. برای مثال وقتی شما تو یکی پروژه ای نیاز دارید که 10 خط کد بنویسید تا یک Custom Button داشته باشید، به جای اینکه این 10 خط رو توی چند جا بنویسید، کامپوننت CustomButton رو با همون 10 خط درست میکنید و هر جایی که لازم دارید ازش استفاده میکنید. https://gist.github.com/behnamazimi/7c26f4457a535b989a6fa241efe60c9d به کامپوننت هاتون رحم کنید!هر کامپوننتی که درست میکنید باید یه وظیفه داشته باشه و اگه غیر از این باشه، واقعا دارید در حق خودتون و کامپوننتتون ظلم میکنید!تا جایی که می تونید کامپوننت هاتون رو بشکنید و به کامپوننت های کوچک تر تبدیل کنید. با این کار بهتر میتونید پروژتون رو تست کنید و نگهداری کد هم راحت تر میشه. به توابعتون هم رحم کنید!تک مسئولیتی بودن در مورد توابع و متدها هم صادق هستش و تمام نکات بالا برای توابع هم تاکید میشه. میتونستم این دو بخش رو یکی در نظر بگیرم چون در React کامپوننت های Functional داریم که در اصل یک متد هستن ولی چون متدها محدود به React و Component ها نمیشه برای همین خواستم جدا روشون تاکید کرده باشم. Functional Components رو جایگزین Class Components کنید!توی React دو نوع کامپوننت میتونیم داشته باشیم:1- Class Components (CC): ساختار یک کلاس رو دارن که از یک کلاس دیگه ی React مثل Component یا PureComponent یا ... Extend میشن. 2- Functional Components (FC): این نوع کامپوننت های در واقع توابع ساده JS هستن که یه پارامتر هایی رو می گیرن و یه چیزی رو برمیگردونن. به این نوع کامپوننت ها Stateless Components هم می گفتن (میگن). این به خاطر این بود که نمی شد در این نوع کامپوننت ها state تعریف کرد. ولی به لطف ویژگی Hooks که در نسخه 16.3 به صورت رسمی معرفی شد، استفاده از state در FC هم ممکن شد. نه تنها state بلکه Lifecycle, Ref, Context و چند مورد دیگه رو هم دیگه میتونید به همراه FC داشته باشید.استفاده از FC به جای CC به شدت توصیه میشه. چون که این مورد هم باعث تمیزی کدتون میشه. همون چیزی که از اول این مطلب روش تمرکز کردیم. بهتره این دو کد زیر رو یه مقایسه ای بکنید. https://gist.github.com/behnamazimi/2d7688da6999c11bacf30abf98e6b369 از توابع کمکی React Immutability Helpers استفاده کنیداین توابع کمکی زمانی به کارتون میاد که بخواید مقدار/مقادیر کپی یک Object رو در یک Scopeتغییر بدین. برای مثال اگر بخواید Obj1 را در Obj2 قرار بدید و مقدار Obj2.value رو تغییر بدین، مقدار Obj1.value هم تغییر با Obj2 تغییر میکنه و این مشکلیه که داریم. در مواردی مثل این شما باید یک Deep Copy (کپی واقعی - نتونستم ترجمه‌ی خوبی براش پیدا کنم!) از Object اصلیتون بگیرید و در متغیر هدف بزارید. یکی از راه های انجام این کار استفاده از Object.assign() به صورت زیر هستش: https://gist.github.com/behnamazimi/3a2d9803254e40b4674c7a7990e2194c یک راه دیگه هم استفاده از تابع update از توابع Immutability هستش که کار رو واقعا راحت کردن. مثال های زیر رو لطفا با دقت مقایسه کنید: https://gist.github.com/behnamazimi/0b15abf9cfa5bcc9bbb7f8469d94ce1a روش مقداردهی تخریبی (ES6 Destructuring Assignment)رو درک و استفاده کنید در ES6 یک روش جدید برای دریافت مقادیر از Object ها و Array ها معرفی شد که به خاطر کوتاهی و راحتی در خوانایی کار رو برای برنامه نویس های JS راحت تر کرده. مثال زیر مقایسه دو حالت مقداردهی را بادقت بررسی کنید https://gist.github.com/behnamazimi/2891fed34de074f65fd47f1443caf716 با (bind(this. خداحافظی کنیددر صورتی که متد داخل کلاس رو به صورت Arrow Function تعریف کنید، دیگه نیازی به bind کردن همه متدها در constructor نخواهید داشت. در واقع با این کار وطیفه bind رو به ES5/6 میسپارید. https://gist.github.com/behnamazimi/d8d0608e317296bcf2860d1b8279da2d اسامی فایل هاتون رو kebab-case بزاریددرسته که هر کسی/تیمی میتونه استاندارد خودش رو در نامگذاری فایل های پروژش داشته باشه ولی بهتره اینه که استاندارد های عمومی و شناخته شده رو رعایت کند. یکی از اون استانداردها ساختار kebab-case در اسامی فایل هاست. یه توضیح جالب در مورد اسم ساختار kebab-case، برخلاف دیگر اصطلاحات نام گذاری، میشه گفت هیچ اتفاق نظری روی اسم این ساختار وجود نداره و همه به سلیقه حودشون یه چیزی رو به عنوان اسمش به کار میبرن. از اسامی شناخته شده می تونم به dash-case, hyphen-case, kebab-case و دو سه مورد دیگه(که الان یادم نمیاد) اشاره کنم. که از بین اینا kebab-case از همشون مشهور تره. از اسم هایی استفاده کنید که لایق خودتون باشه!همه متغیرها، متدها، کلاس ها و فایل‌ها یه شخصیتی برای خودشون دارن که اولش با تعیین اسمشون توسط شما شکل میگیره. خودتون رو بزارید جای این عزیزان؛ راضی میشید یکی یه اسم عجیب غریب بزاره روی شما؟ برای این عزیزان اسامی خوب و با معنی انتخاب کنید و هیچ وقت هیچ اسمی رو به اختصار ننویسید مگر اون چیزهایی که دیگه واقعا شناخته شده هستن. برای مثال msg یک اختصار شناخته شده از message هستش و استفاده از اون هیچ مانعی نداره ولی اگر بجای Customer مثلا cstmr رو به کار ببرید خیلی اشکال داره و حتما نیازه که یه اصول اولیه ای رو دوباره مطالعه کنید.این مورد رو حتی توی تست ها و حتی توی Hello World هاتون هم رعایت کنید. چرا که رعایت نکردنشون فقط باعث ریشه کردن عادت های بد کدینگ میشه.از اینکه همه جا try-catch میزارید خجالت نکشید!به هر نحوی که میتونید توی کدتون خطاهای احتمالی رو شکار کنید. ممکنه بعضی هارو بشناسید که اینو عیب بدونن! ولی مطمئن باشید که try-catch ها و Error Handling اعتبار یک کد هستش. به کدتون اعتبار بدین و برچسب های درست روی هر بخش از کدتون بزارید. هیچ وقت خطاهای بی معنی رو throw نکنید و سعی کنید یک Sheet از خطاها و توضیحاتشون برای هر پروژه داشته باشید.حرف آخررعایت کردن موارد بالا تاثیر بسیار زیادی در کیفیت کد شما خواهد داشت و مطمئنا در کوتاه مدت خودتون هم متوجه این تغییر خواهید شد.همونطور که اول مقاله نوشتم، درسته که توی بعضی قسمت ها روی React تاکید کردیم ولی خودتون هم دیدید و خوندید سعی کردم موارد خیلی جامع باشن.نظری/سوالی داشتید من در خدمتم یا اگر مشکلی یا موردی بود بفرمایید. امیدوارم مفید واقع بشه! :) بهنام عظیمی بهنام عظیمی Mon, 04 Mar 2019 01:59:24 +0330