https://virgool.io/feed/@hasanparasteh fa 2026-06-10 13:00:15 https://files.virgool.io/upload/users/1115755/avatar/bk4vIJ.jpeg?height=120&width=120 https://virgool.io/@hasanparasteh https://virgool.io/@hasanparasteh/soydev-%DA%A9%DB%8C%D8%B3%D8%AA-st7fvk1ixe2g نرم افزار‎های Bloatedتوی این دنیای تکنولوژی همیشه کلی اصطلاحات بامزه داریم. قطعا راجع به Junior Developer یا Senior Developer شنیدید. این دو برای سطح بندی افراد استفاده می‎شه. اما Soy Dev یه جورایی کلمه‎ی خوبی نیست? و نباید به هرکسی گفت....این کلمه از کجا اومده؟شاید بعضی هاتون که دارید این مطلب رو میخونید ، اسم سریال Silicon Valley رو شنیده باشید و شخصیت های اصلی این سریال رو بشناسید (اگر هم این سریال رو ندید زیاد نگران نباشید چون من همه چیو با جزئیات و بدون اسپویل تعریف می‎کنم)! توی یکی از قسمت های این سریال یکی از شخصیت‎ها درحال نوشیدن Soy Latte بود و در همین حین روی مک بوکی که داشت; کد JavaScript می‎‌زد و پروژه هاش رو پیش می‎برد. این شخصیت از یه کد ادیتور بادکرده(Bloated) استفاده می‎کرد.همه‎ی اینا به کنار ، برای اینکه خودش و یا دیگران رو قانع کنه به همه می‎گفت که این مک بوک Unix-Based هست‎اش و مثل لینوکس می‎مونه و اوکیه!? بعد این سخنرانی‎ها ، تازه شروع می‎کرد و راجع به اینکه چرا لینوکس نصب نمی‎کنه و یا نداره صحبت می‎کرد. رابط کاربری گرافیکی باعث احساس امنیت‎اش می‎شد. هر محصولی که FAANG(Facebook, Apple, Amazon, Netflix & Google) بیرون می‎داد رو به سرعت می‎خرید و استفاده می‎‏کرد. به معنی واقعی کلمه فقط و فقط مصرف کننده(Consumer) بود.حالا بعد این همه قصه این کلمه یعنی چی؟این کلمه برای تعریف بسیاری از برنامه نویس‎های نسل جدید استفاده می‎شه که:1- برنامه‎ای که می‎نویسند همیشه بیشتر از مقدار مورد نیاز ، پردازنده و رم استفاده می‎کند(برنامه‎های ناکارآمدی می‎نویسند).2- این آدم‎ها کار سخت رو به کار هوشمندانه ترجیح می‎دهند.3- هیچ دانش و یا تحقیقی راجع به مشکلی که قراره با برنامه نویسی حل کنند ندارند و مهم تر از همه از راه حل‎های مرسوم که دیگران استفاده می‎کنند و به نتیجه می‎رسند را در پروژه‎های خودشان پیاده سازی نمی‎کنند و در نهایت یک راه حل بسیار سخت و پیچیده‎ای را برای یک مسئه‎ی بسیار راحت ارائه می‎دهند.4- با زبان‎های برنامه نویسی Native ناآشنا هستند و ترجیح می‎دهند همیشه از ، سطح بالاترین ابزارهای برنامه نویسی که نیاز به کمتری به فکر و تعمق دارد ، استفاده کنند.از کجا یه SoyDev را تشخیص دهیم؟تشخیص این نوع برنامه نویس‎ها بسیار ساده است :). به طور مثال به مکالمه‎ی زیر توجه کنید:نفر اول: سلام من یه برنامه با React و Electron نوشتم که می‎تونه فیلم‎های یوتیوب رو دانلود کنه!نفر دوم: خب چرا از Youtube-dl استفاده نمی‎کنی؟نفر اول: اون دیگه چیه؟نفر دوم: تو واقعا یه SoyDev هستی?‍♂️ حسن پرسته حسن پرسته Thu, 19 Aug 2021 13:58:50 +0430 https://virgool.io/@hasanparasteh/%D8%B3%D8%A7%D8%AE%D8%AA-%D9%84%D9%88%D8%AF%DB%8C%D9%86%DA%AF-%DA%A9%D8%A7%D8%B1-%D8%B3%D8%AE%D8%AA%DB%8C%D9%87-zjnm2uh4zzmr نمونه‌ی لودینگامروز می‌خوام بهتون vuetify رو معرفی کنم. این فریم ورک لعنتی خیلی عالیه!با وجود این فریم ورک می‌تونید همه کار کنید ، از جمله ساخت یه لودینگ توی اپلیکیشن فرانت اند خودتون که با vue.js نوشتید‌اش.فقط کافیه که با دستور زیر توی ترمینال این فریم ورک رو به اپلیکیشن خودتون اضافه کنید.vue add vuetifyبعدش یه کامپوننت به اسم L‍oading.vue بسازید و دقیقا اینی که اینجاست رو کپی پیست کنید!<template> <v-overlay :value=&quotisLoading&quot :z-index=&quot999999&quot> <v-progress-circular :size=&quot50&quot color=&quotprimary&quot indeterminate></v-progress-circular> </v-overlay> </template> export default { name: &quotLoading&quot, props: [&quotisLoading&quot], }; حالا هرکجایی از پروژه که نیاز به لودینگ داشتی فقط کافیه که یه متغیر به اسم loading بسازی و به عنوان یه prop به این کامپوننت پاسش بدی! مهم نیست این کامپوننت رو کجای template ات میذاری فقط وجودش تو پیج الزامیه! بعدش با true و یا false کردن مقدار لودینگ می‌بینی که یه لودینگ زیبا برات درست شده!برای اطلاعات بیشتر و شخصی سازی این لودینگ ها می‌تونی به داکیومنت خود سایت vuetify یه نگاه بندازی و ببینی که چقدر کارای خلاقانه‌ای می‌شه با این ابزار کرد. حسن پرسته حسن پرسته Tue, 17 Aug 2021 16:12:45 +0430 https://virgool.io/@hasanparasteh/%D8%AA%D8%AC%D8%B1%D8%A8%D9%87-%DB%8C-%D8%B4%D8%AE%D8%B5%DB%8C-%D8%B3%D8%A7%D8%AE%D8%AA-table-%D8%AF%D8%B1-vuejs-lvk9pz6qful1 بخشی از کد HTMLمن اینجا اعتراف می‌کنم که یکی از سخت ترین کارهای دنیا ساخت Data Table هاست. مخصوصا اگر شما با حجم زیادی از اطلاعات سروکار داشته باشید; این مسئله پیچیده تر می‌شه. اما در نهایت من موفق شدم! توی این پست می‌خوام براتون توضیح بدم که چجوری با استفاده از Vue.js جدولی بسازیم که بسیار هماهنگ باشه و جدای اون قابلیت شخصی سازی بسیار زیادی هم داشته باشه.چرا چرخ را دوباره اختراع کنیم؟اول از همه ، واقعا همیشه نیاز نیست که شما بیاید و مثل من دوباره از اول چرخ رو اختراع کنید! همیشه از قبل کسانی بودند که همچین نیازی داشتند و این نیاز رو در قالب Framework و یا Component در آوردن که شما بتونید به راحتی به خواسته خودتون برسید. به طور مثال تو همه‌ی کتابخونه‌های معروف Vue.js مثل Vuetify که من توی پروژه‌ام استفاده کردم ، این قابلیت به صورت پیش‌فرض وجود داره!سازنده‌ی زبان برنامه نویسی C++ یه جمله‌ی معروف داره که میگه:The standard library saves programmers from having to reinvent the wheel.-Bjarne Stroustrupدرسته که Bjarne Stroustrup این حرف رو برای زبان برنامه نویسی C++ زده ولی این جمله همه جا کاربرد داره!حالا که می‌دونید نباید چرخ رو از اول اختراع کرد ، فکر می‌کنید من چرا دارم این کار رو میکنم؟وجود یک Feature که در هیچ جا نیست!ما توی پروژه‌امون نیاز داشتیم تا وقتی کاربر روی هر ردیف از Table که رفت بتونه کلیک راست کنه و یه صفحه‌ی جدید از اون لینک باز بشه! این چیز خیلی ساده به نظر میاد! شاید الان با خودتون فکر کنید که خب این که خیلی ساده‌اس و فقط نیاز داره که یک تگ a بزاریم وسط اون tr>td‌ ها که کار راه بیوفته!اما نه به همین راحتی ها هم نبود! بزارید بهتون نشون بدم که چرا این روش جواب نمی‌گیره....<tbody> <tr> <a href=&quot/hello&quot> <td>تست</td> <td>تست</td> <td>تست</td> </a> </tr> </tbodyاگر شما اینجوری بخواید row های یک جدول رو لینک کنید به بخش دیگه ، دچار یک مشکل بزرگ می‌شید. اول اینکه CSS هاتون رو هرجوری که بنویسید ظاهر این جدول به درستی درنمیاد چون توی استاندارد W3C این کار اشتباه محض هست! که خب من در تلاش اول‌ام این اشتباه رو انجام دادم! راه حل دوم چی بود؟ خب گفتم حالا که اینجوری نمیشه قطعا یکی دیگه به همین مشکل خورده و توی اینترنت راه حل هایی باید وجود داشته باشه!جستجو و پرسش و پاسخ در StackOverflowدست از تلاش برنداشتم! همینجوری گشتم و گشتم و گشتم و فهمیدم که بله یه راه حل هایی هست اما همشون باعث اضافه شدن پیچیدگی‌هایی به ساختار Component می‌شن که اصلا نیازی نیست.یکی از راه حل ها اینجوری بود که می‌گفت: خب بجای اینکه تگ a کل tr رو بپوشونه بیا و تگ a رو بزار توی td که جای درست و استاندارد‌‌اش اونجاست و برای اینکه کل ردیف ام لینک بشه از جاوا اسکریپت استفاده کن!این راه حل جواب میده! ولی دقیقا اون چیزی نیست که باید باشه. نفر بعدی که بهم جواب داد واقعا آدم فنی‌ای بود ولی بازم نتیجه دلخواه منو نداشت. اون آدم اینجوری میگفت: چه کاریه که بخوای کلیک راست داشته باشی؟ هروقت که کاربر روی یک ردیف کلیک چپ کرد اون ردیف رو با دستور زیر توی یک تب جدید باز کن; اینجوری نیازی هم به کلیک راست ندارند و همه چی توی تب جدید باز میشه! کدی هم که باید بنویسی مثل این میشه:let routeData = this.$router.resolve({name: 'routename'}); window.open(routeData.href, '_blank');این راه حل خیلی خوب بود! ولی مدیر فنی ما حتما می‌گفت که باید امکان کلیک راست وجود داشته باشه! اینجوری شد که من مجبور شدم تا از اول چرخ رو اختراع کنم و یک جدول با استفاده از تگ div بسازم!تگ div دیگه هیچ‌کدوم از این قوانین رو نداشت و هرجوری که بخوای می‌تونی ازش استفاده کنی. پس من شروع به کار شدم و یه کامپوننت به اسم Table.vue تو ابزارهام اضافه کردم!اگر شما هم مشکل منو دارید دیگه از اول چرخ رو اختراع نکنید! من یه دونه ساختم و بیاید از چرخ من استفاده کنید و برای خودتون شخصی سازی‌اش کنید. این کامپوننت vue.js رو می‌تونید از این لینک پیداش کنید.چجوری میشه از این استفاده کرد؟برای استفاده کردن از این کامپوننت فقط کافیه این دو خط زیر بخونید تا خودتون کلیت قضیه رو متوجه بشید!اول از همه باید این کامپوننت رو import کنید! با دستور زیر می‌تونید این کار رو تو بخش script انجام بدید.import Table from &quot@/components/Utility/Table" export default { name: &quotHome&quot, components: { Table }, }بعد از اینکه به درستی این کار رو انجام دادید فقط کافیه که جدول خودتون رو بسازید ولی قبلش نیازه که حتما عنوان هاتونو از قبل تعریف کنید. برای تعریف عنواین می‌تونید از بخش data این کار رو انجام بدید.data(){ return {} headers: [ { text: &quotنام کمپین&quot, value: &quotname&quot, width: &quot250&quot, isOrder: false }, { text: &quotشماره&quot, value: &quotid&quot, width: &quot80&quot, isOrder: false }, { text: &quotمشتری&quot, value: &quotcustomer&quot, width: &quot120&quot, isOrder: false }, { text: &quotفاکتور&quot, value: &quotfactorId&quot, isOrder: false }, ], orderMode: &quotDESC&quot, } },اگر دقت کنید من بجز هدرهایی که تعریف کردم یه متغیر به اسم orderMode ام تعریف کردم تا نوع مرتب سازی اطلاعات رو تعریف کنم. این جدول همه‌ی اطلاعاتی که نیاز داره رو از سرور به صورت فایل json دریافت می‌کنه. من همه‌ی دیتا هایی که نیاز بوده رو توی متغیری به اسم campaigns ذخیره کردم.<Table :tableLength=&quotcampaigns.length&quot> <template v-slot:header> <div role=&quotrow&quot> <div v-for=&quoth in headers&quot :key=&quoth.value&quot role=&quotcolumnheader&quot> <span v-if=&quoth.value === 'customer'&quot> {{h.text}} </span> <span v-else @click=&quotsortByHeaders(h.value)&quot> {{ h.text }} <v-icon v-if=&quoth.isOrder&quot x-small> {{orderMode === &quotDESC&quot ? &quotmdi-arrow-down&quot : &quotmdi-arrow-up&quot}} </v-icon> </span> </div> </div> <template> <template v-slot:body> <nuxt-link v-for=&quotitem in campaigns&quot :key=&quotitem.id&quot :to=&quot'/campaigns/' + item.hash&quot role=&quotrow&quot> <div role=&quotcell&quot> {{item}} </div> </nuxt-link> </template> <Table>در نهایت به هچین چیزی برای جدول می‌رسیم. فقط یه نکته‌ای بگم که من یه قابلیت برای مرتب سازی بر اساس هر عنوان هم اضافه کردم که تابع sortByHeader این کار رو انجام می‌ده و دلیل اینکه من برای عنوان مشتری این قابلیت مرتب سازی رو نذاشتم اینه که نام مشتری‌ها نیازی به مرتب سازی نداشتند و اگر کاربر رو بخش نام مشتری بزنه هیچ اتفاقی نمیافته.امیدوارم پست براتون کاربردی بوده باشه و اگر سوالی داشتی بهم ایمیل بزنید خوشحال میشم بتونم کمکتون کنم. ایمیل من: hasanparasteh@gmail.com حسن پرسته حسن پرسته Tue, 17 Aug 2021 15:44:03 +0430 https://virgool.io/@hasanparasteh/suckless-programming-%DA%86%DB%8C%D8%B3%D8%AA-trbllafzmm7n نمایی از برنامه‎ی st که محصول این فلسفه است.در دهه‎ی گذشته ، در صنعت نرم افزار برنامه نویس‎های بسیاری شروع به کار کردند! با توجه به روند سریع توسعه‎ی نرم افزار برخی از برنامه نویس‎ها مجبور شدند مواردی همچون کارایی ، میزان مصرف حافظه و سرعت اجرایی را در پروسه‎ی توسعه‎ی نرم افزار لحاظ نکنند; این باعث شد تا در دنیای امروز شاهد برنامه‎های کندی باشیم که با جاوا اسکریپت نوشته شده‎اند و در حالت Idle خود بیش از یک تا دو گیگابایت رم مصرف می‎کنند.استارت این ایده از همینجا نشأت می‎گیرد.فلسفه‏‎ی Software that sucks lessهدف اصلی Suckless.org ساخت برنامه‎های مینیمالی است که فقط همان یک کار را به درستی انجام دهد نه ساخت برنامه‎هایی پر از تبلیغ و ویژگی‎های اضافه(Bloated) که شاید به هیچ درد کسی‎ام نخورد. متاسفانه ترند امروزه‎ی دنیای تکنولوژی دقیقا برخلاف این فلسفه است و بیشتر تلاش می‎کنه تا برنامه‎های تجاری پر تبلیغ‎ای(و پر از خطاهای مختلف که فقط بخاطر پیچیدگی های اضافه‎ی برنامه نویسی در بخش توسعه است) بسازه که بتوانند همه کاری بکنند.نمی‎دونم که آیا توی اکوسیستم دوستداران لینوکس فارسی کسی باشه که اسم برنامه‎هایی مثل dwm یا dmenu رو شنیده باشه یا نه ولی اینها نمونه‎هایی از مجموعه برنامه‎هایی است که تو دنیای اوپن سورس(Open Source) از این فلسفه بیرون اومده و یه در جدیدی روی برنامه نویس‎ها و دوستداران تکنولوژی باز کرده.ساخت برنامه‎ی ساده و ظریف ، خیلی پیچیده‎تر از اون چیزی هست که شاید فکر‎اش را بکنید. اگرچه در این بین دنیا نیاز به کسی داره که این سختی را به جون بخره ، تا همگی بتونیم به یه برنامه‎ی قابل اطمینان و مهم‎تر از همه قابل توسعه برسیم. گروه هدف Suckless ، آدم‏‎های متخصصی است که کمتر از GUI استفاده می‏‎کنند و یا مینیمالیسم برایشان اهمیت قابل توجه‎ای دارد است. امیدوارم با خوندن این پست علاقمند بشید و توی ساخت دنیای بهتر برای یکدیگر نقشی ایفا کنید.با تشکر از وقتی که گذاشتید. خیلی خوشحال می‎شم اگر نظرتون رو بیان کنید و بگید که چقدر از نرم افزارهای کند و پر باگ اذیت شدید... حسن پرسته حسن پرسته Sun, 15 Aug 2021 20:57:58 +0430