نوشته های افشینم

قصه‌ی نرم‌افزار‌های پخش مویرگی در ایران

افشینم — Sun, 11 Sep 2022 22:21:00 +0430

عرضه و تقاضا. یک سمت داستان شرکت‌های پخش با بضاعت مالی قابل قبول که برای سهولت کار نیاز به نرم افزار پخش مویرگی دارند، تقاضا! طرف دیگر داستان هم شرکت‌های نرم افزاری که پلتفرم‌های پخش مویرگی ارائه می‌دهند، عرضه! به همین سادگی. به عنوان یک عضو خیلی وقت است که در شرکت‌ پخش کار می‌کنم. و مدتی هم هست که خودم شرکت پخش دارم. قبلا یک کاربر بودم که نرم افزار تبلت پخش مویرگی را باز می‌کردم و از داستان پشت پرده‌ی آن‌ها بی خبر بودم. اما در این مدت که شرکت دارم خودم به عنوان مسئول انفرماتیک شرکت مستقیما با بخش پشت پرده‌ی نرم افزار‌های پخش مویرگی سر و کار دارم. و الان که به ستوه آمده‌ام دارم این پست را می‌نویسم.اولین کار برای خرید نرم افزار جستجو و پرس و جو کردن است. کاری که ما حدود ده روز ولوو بیشتر به آن مشغول بودیم. از دوست و آشنا تا وب‌سایت شرکت‌های نرم افزاری و... . در ابتدای مراتب انتخاب نرم افزار را یک کار ساده می‌پنداشتیم اما با توجه به تنوع محصولات موجود اصلا کار ساده‌ای نخواهد بود. خلاصه نرم افزار را انتخاب کردیم و نصب و راه‌اندازی آن انجام شد و الان هم مشغول به کار هست. اما با هزار و یک ایراد ریز و درشت. روز‌های اول بعد از اینکه نرم افزار نصب شد یک سری فیلم به ما دادند و گفتند که با این‌ فیلم های آموزشی شروع کنید هر کجا که برای شما سوال پیش آمد با پشتیبانی تماس بگیرید. در همین حد. تصور کنید پشت سیستم نشسته بودیم یک نرم افزار تو در تو و وسیع روبه‌رویمان بود. و فیلمی که برای ما فرستاده بودند در حد تعریف مشتری و تعریف کالا بود. همان پنج دقیقه‌ی اول یک کاغذ گذاشتم زیر دستم و شروع کردم به یاداشت کردن سوال‌هایم. چون خیلی برایم مهم بود که همه‌ چیز بر روی اصول و قائده‌ای که از پیش برای خودمان تعین کرده بودیم جلو برود. اما اولین مشکل نرم‌افزار پشتیبانی آن بود. باید حدود ۱۵ دقیقه پشت خط می‌نشستم تا جواب می‌دادند. مشکلات را توضیح می‌دادند و دوباره روز از نو و روزی از نو. کلی پول داده‌ایم بابت نرم افزاری که بعد از ده‌ها تماس و پشت خط منتظر بودن و رفع ایراد کردن توانستیم آن را راه اندازی کنیم. که هنوز هم متاسفانه خالی از باگ نیست. اما کار راه بنداز است. قضیه این است که شرکت‌های نرم افزاری می‌دانند که مشتری‌هایشان تقریبا مشکل مالی ندارد و مجبور به خرید محصولات افتضاحشان هم هستند چون به قول معروف دستشان(شرکت‌های پخش) زیر سنگ‌شان(توسعه دهنده‌های نرم افزاری) است. پس به میل خودشان رفتار می‌کنند. کافی است یک سر به سایت نرم افزار‌ها بزنید. همه چیز آراسته و شکیل. بعد از چند ثانیه یک چت در پایین تصویر باز می‌شود و محترمانه از شما می‌خواهد هرگونه راهنمایی که می‌خواهید با همکاران ما در ارتباط باشید و... خب این ویترین کار است که بی نظیر به نظر می‌رسد. مشتری پولدار هم این همه زرق و برق را که می‌بیند خوشش می‌آید. پیش خودش فکر می‌کند که: به‌به پشتیبانی سریع و ظاهر آراسته و ... چه از این بهتر؟‌ اما صادقانه بگویم که همه چیز تا قبل از خرید نرم افزار خوب است. مشکلات بعد از خرید و راه اندازی شروع می‌شود. شما فقط کافی است نگاهی به قیمت‌ نرم افزار‌ها داشته باشید. گران، گران و گران‌تر! هزینه‌ی پشتیبانی هم که دیگر بماند. مبلغی گزافی که سالانه از مشتریانشان می‌گیرند نه برای حل و راه‌اندازی نرافزار بلکه برای رفع باگ نرم افزارشان. امیدوارم این سیاست از پیش تعین شده نباشد که نرم افزاری را با ده‌ها باگ ریز و درشت در ویترین شیک وب‌سایت‌شان بفروشند و مبلغ گزافی بنام هزینه‌ی پشتیبانی از مشتریان بگیرند که دانه دانه باگ‌‌هایی که مشتری به آن برخورده است را رفع و رجوع کنند. اما همینطور است. بگذارید برایتان یک مثال بیاورم که به شخصه برای خودم پیش آمد. من چندین بار، هم در هنگاه خرید و هم در زمان نصب و راه اندازی برنامه به توسعه دهنده گفتم و بسیار هم تاکید کردم که مالیات و ارزش افزوده کالا‌ها برایمان بسیار مهم است. گفتند که فیلم را ببینید همه چیز را توضیح داده است. خلاصه فیلم را دیدیم طبق فیلم انجام دادیم نشد. با پشتیبانی تماس گرفتیم و ارزش افزوده کالاها در فاکتور اعمال شد. وقتی که شروع به کار کردیم بعد از چند روز متوجه شدیم که فاکتور‌ها شامل ارزش افزوده نمی‌شوند. تماس گرفتیم و بعد از ۲۰ دقیقه کار با انی‌دسک پشتیبان نرم افزار نتوانست ایراد را پیدا کند. از ما خواست که یک بار روند کار را در حالی که ایشان نگاه می‌کنند را انجام دهیم. ماجرا از این قرار بود که اگر فاکتور‌ها را تک به تک و دستی تایید می‌کردیم ارزش افزوده اعمال می‌شد. اما در تایید اتوماتیک و دسته جمعی فاکتور‌هایی که فروشنده‌ها با موبایلشان ارسال کرده بودند ارزش افزوده اعمال نمی‌شد. بعد از نیم ساعت تماس تلفنی و پشت انی‌دسک پشتیبان نرم افزار گفت آهان متوجه شدم و به بخش تنظیمات نرم افزار مراجعه کرد. در پیچ در پیچ منو‌ها، در میان انبوهی از گزینه‌‌ها تیک یک گزینه را فعال کرد و گفت: این را برای سایر کاربران هم فعال کنید. یک گزینه‌ به عنوان: اعمال ارزش افزوده در تایید اتوماتیک توسط کاربر. به همین سادگی با یک حساب سر انگشتی حدود 30 میلیون تومان ارزش افزوده‌ در آن چند روز از مشتریان دریافت نشده بود و تلاش برای استرداد آن هم بی‌هوده بود. فقط به خاطر یک تیک. که خود پشتیبان به زور آن را پیدا کرد چه برسد به ما که فقط یک هفته با نرم‌افزار کار کرده بودیم. سوال اصلی این است که چرا باید تیک همچین گزینه‌ای به صورت پیش فرض فعال نباشد؟ این مشکل فقط برای من بوده یا...؟ اصلا چرا باید همچین گزینه‌ای برای فعال شدن یا نشدن وجود داشته باشد. وقتی کاربر برای کالا و مشتری ارزش افزوده تعیین کرده قصد نگرفتن آن را که ندارد!موضوع بعدی ظاهر و طرحی برنامه‌ها است. ظاهر برنامه‌ها همگی شبیه نرم افزار‌های بیست سال قبل است و اصلا UI و UX برای توسعه دهنده‌ها مهم نیست. چون مشتری‌ها همین الان هم برای همین محصول نصفه و نیمه صف کشیده‌اند. من به شخصه با چندین نرم افزار کار کرده‌ام. از نرم افزار 2 میلیون تومانی تا نرم افزار چند صد میلیون تومانی. شاید در ظاهر کمی فرق داشته باشند اما واقعا رابط کاربری(UI: User Interface) همگی آن‌ها افتضاح است. انگار اصلا طراحی نشده باشند. فقط به کسی گفته‌اند که این گزینه‌ها را در این بخش قرار بده و تمام. تجربه‌ی کاربری (UI: User Experience) هم که بماند... به عنوان مثال من ده سال قبل در فتوشاپ با یک آپشن کار کرده‌ام پنج شنبه پای لبتاب نشستم و با فتوشاپ کار می‌کردم بدون اینکه دربه‌در بدنبال آن آپش بگردم خیلی راحت آن را پیدا کردم. اما در نرم‌افزاری که روزانه و مداوم با‌ آن در ارتباط هستم هنوز این مشکل را دارم و برای یافتن یک چیز باید ده‌ها منو و تب را زیر و رو کنم. در حالی که قبلا هم با آن سر و کار داشته‌ام. ظاهر و رابط کاربری بد تبدیل به یک اپیدمی شده در این نرم افزار‌ها. یک پیچیدگی بی دلیل و سردرگم کننده.اما در نهایت برای خرید نرم افزار باید به چند نکته توجه داشته باشیم. معمولا مدیر شرکت‌ها مشغله‌ی کاریشان بیشتر از آن است که به دنبال نرم افزار بگردند. پس این کار به کسی محول می‌کنند. به عنوان کسی که تجربه‌ی کافی در این کار را دارم این را مطرح می‌کنم. به امید اینکه نفر بعدی راهی که من رفته‌ام را از ابتدا نرود.ابتدا باید به یک توافق نظر برسید که در مجموعه‌ی شما چه انتظار‌هایی از نرم‌افزار پخش مویرگی دارید. همه رو تیتر وار یادداشت کنید. وقتی بحث شرکت پخش می‌شود حتی در اشل و مقیاس کوچک هم باید حداقل ده نفر را مدیریت کنید. اینکه وظیفه‌ی هر شخص در مجموعه چیست. اینکه چه آپشن‌هایی کار شما را راه می‌اندازد. اینکه سرپرست فروش چه انتظار‌هایی از نرم افزار شما دارد. حسابدار مجموعه چه نیاز‌هایی دارد و... همگی را یادداشت کنید. و به دنبال برنامه‌ای باشید که بتواند جوابگوی نیاز‌هایتان باشد. بودجه. موضوع بسیار مهم بودجه‌ ای است که برای خرید نرم افزار تخصیص می‌دهیم. هر چه ظرفمان بزرگتر باشد بیشتر آش می‌خوریم. اگر بتوانیم بیشتر از 100 میلیون هزینه کنیم می‌توانیم سیستم مبتنی بر فضای ابری بخریم. اگر بیشتر پول بدهیم و سرور سریعتری بخریم سرعت بیشتری را تجربه می‌کنیم. پس قیمت خیلی مهم است. در حدود 40 میلیون تومن هم می‌توانیم نرم افزار غیر ابری بخریم که کمی محدود تر است. نرم افزار‌هایی هم هستند در حدود قیمت 20 میلیون تومان که مشخصا هرچه قیمت پایین بیاید دردسر کار با نرم افزار بالا می‌رود. تازه باید به یاد داشته باشیم که معمولا درصدی از قیمت نرم افزار را باید سالانه به عنوان هزینه‌ی پشتیبانی به توسعه دهنده پرداخت کنیم.(در مورد ما 5٪ قیمت خرید نرم افزار می‌شود هزینه‌ی پشتیبانی نرم افزار.) مبلغ هزینه‌ی پشتیبانی هم بر اساس قیمت روز نرم افزار محاسبه می‌شود. مثلا اگر نرم افزار ی را خریده‌ایم 37 میلیون تومان اگر 5٪ مبلغ خرید را در نظر بگیریم می‌شود 1.850.000 تومان. اما اگر سال بعد قیمت نرم افزار بشود مثلا 47 میلیون شما باید 5 درصد 47 میلیون را پرداخت کنید.پشتیبانی. از هرچیزی مهم تر پشتیبانی است. نرم افزاری را انتخاب کنید که پشتیبانی قوی داشته باشد. تقریبا همه‌ی نرم افزارهای موجود در این بخش مشکل دارند. اما در میان بد و بدتر شما بد را انتخاب کنید. چون هر نرم افزاری را که انتخاب بکنید برای تماس با پشتیبانی باید ساعت‌ها پشت خط بایستید و تحمل کنید. همه‌ی نرم افزار‌ها هم در ابتدا پیچیده و گنگ هستند پس پشتیبانی بسیار مهم است. نرم‌افزار‌هایی هستند که همه چیز را در قالب یک پکیج می‌فروشند. معمولا هم قیمت این‌ها بالاتر است. اما نرم افزار‌هایی هم هستند که بیس نرم افزار را با قیمت کمتری می‌فروشند و در نهایت اگر آپشنی را لازم داشتید می‌توانید به صورت جداگانه خریداری کنید و به بیس نرم افزار اضافه کنید. در این صورت فقط پول چیزی را می‌دهید که به آن نیاز دارید. لازم نیست پول آپشن‌هایی را بدهید که هیچ وقت به آن‌ها نیاز ندارید. مثلا اگر نیاز به آپشن مدیریت انبار دارید می‌توانید به صورت جداگانه آن را بخرید. اگر هم مورد نیازتان نباشد لازم نیست پولش را بدهید و استفاده نکنید.خیلی طولانی شد. یک سری حرف‌های ناگفته مانده شاید بعد‌ها به صورت یک پست جداگانه منتشر کردم. اما چیزی که اهمیت بیشتری دارد این است که مشتری مداری در توسعه دهنده‌ها خیلی ضعیف است. این در حالی است که در‌آمد قابل توجهی هم از فروش این نرم افزار‌های عایدشان می‌شود. اما راضی نگه داشتن مشتریانشان را اصلا بلد نیستند. ای کاش برایشان مهم بود که در ازای پولی که می‌گیرند خدمات شایسته‌تری ارائه بدهند و فقط به این بسنده نکنند که چون مشتریان نمی‌توانند گزینه‌ی بهتری را در بازار پیدا کنند پس چه کاری است خودمان را به اذیت بیندازیم...یادمان نرود که وجدان کاری خیلی مهم است.20 شهریور 1401افشین زارعی

نه به سوپر لیگ!

افشینم — Mon, 03 May 2021 09:39:13 +0430

تاریخ را نوشتید ، اینک آماده اید برای در تاریخ ماندنچرا که کسی جرئت ندارد ایستادگی کند در برابر اراده تان برای بردناز بدو طلوع ستاره ها ، چامارتین قدیمی منمجذوب کرد ما را از دور و نزدیک گرد همجامه ات را به تن می کنم ، به قلبم چفتش می کنمروزهایی که بازی داری ، از خود بیگانه می شوملاسائتا می دود ، مادرید من می تازدمی جنگم ، زیبا هستم ، این سرود را آموختم :مادرید ، مادرید ، مادرید ، زنده باد مادرید!همین و بس ، همین و بس ، زنده باد مادریدنیمه‌ی احساسی شداین ترجان فارسی سرود تیم محبوبم است که اسپانیا‌یی‌ها با عشق آن را سروده‌اند، و من اینک که در حال نوشتن هستم صدایش پیچیده در گوشم و هی دارد تکرار می‌شود. تکرار قهرمانی‌ها و درخشیدن‌ها و تکرار رد پای کهکشانی در مستطیل سبز و تکرار ابدیت! آینا دا ماس، همین و بس. انگار که کسی دستش خورده باشد به دکمه‌ی پاوز کنترل و بعدش کنترل را خورد خاکشیر کند. انتهای این فیلم چه می‌شود؟ حالا و در این لحظه که دیگر نمی‌توان پلی شود چون کنترلی برای پلی کردن و ادامه دادن نمانده است. پس آینا دا ماس! سیزده قهرمانی چمپونز لیگ، سی و دو قهرمانی لالیگا، ۱۹ قرمانی کوپا دل ری، سوپر جام اروپا، سوپر کاپ اسپانیا، جام باشگاه‌های جهان و جدا از همه‌ی این‌ها دریافت جام بهترین تیم فوتبال قرن بیستم. این آخری به نحوی یونیک و خاص است که مو به تن سیخ می‌کند. همه‌ی این‌ها در زیر سایه‌ی یوفا و فیفا‌ی به قول خودشان دزد سر گردنه بوده است. ما یک روزه کهکشانی نشده‌ایم، زمین خوردیم، تحقیر شدیم، حذف شدیم و زمین زدیم، تحقیر کردیم و حذف کردیم تا شدیم رئال مادرید. من از دو ماه قبل منتظر کادیز بودم که برد یک هیچ و شانسی نیم فصل را جبران شده ببینم، بی صبرانه منتظر الکلاسیکو‌یی هستم که باز بتوانیم پنج‌تایی‌شان کنیم و سه امتیاز پنج‌گله نوش جان کنیم. منتظر چهاردهمین قهرمانی تیم بدون رونالدو و هازارد و بیل و دیماریا هستیم. اما هیچ وقت منتظر آخر خط نبوده و نیستیم. سوپر لیگ اروپا! این فاجعه‌ی شوم که سایه‌ی زشت و منحوس انداخته بر رئال‌مادرید، نه نه نه بر فوتبال، کل فوتبال. همه چیزش. منتظر این نبودیم. که همه چیز به یک‌باره تمام شود. حرص خوردن از باخت به کادیز تا لذت فتح الکلاسیکو و بالا بردن جام لیگ قهرمانان و پخش شدن آهنگش در بلند‌گو‌های استادیوم این بار به صورت کاملا اختصاصی و ویژه. انگار که این بار صدایش خیلی متفاوت‌تر و رسا تر پخش می‌شود چون به افتخار تیم ما پلی شده. همین و بس! این است فوتبال! مجموعه دقایق لبریز شور و احساس. فوتبال برای ما بیشتر از سینما و موسیقی به مراتب احساسی‌تر است. پس چرا با تمام احساسم به سوپر لیگ اروپا نه نگوییم؟؟؟ مطمئنم وضع برای هوادار بارسا و اتلتیکو و منچستر و لیورپول و ... هم همین حال واویلاییست که ما داریم. چرا؟ لطفا جوابی بدهید که این بحران احساسی-عاطفی را با خود بشورد و ببرد.نیمه‌ی منطقیچرا باید بازیکنان و مربیان راضی بشوند در یک لیگ منحصر به فرد و مختصر و محدود کار کنند؟ چرا باید ۱۲۰ ۳۰ سال افتخار و تاریخ را کنار بگذاریم و از اول شروع کنیم؟ چرا باید فرار کنیم از حل موضوع؟ اگر یوفا و فیفا فاسد اند خب بجنگید و پیروز شوید. تا مردم هم افتخار کنند به وجود چون‌ شما‌هایی! این که نشد راه حل. متاسفانه مدیران فوتبال پول بیشتر می‌خواهند که پول بیشتر خرج کنند و پز بیشتر بدهند. فوتبال بیست سال پیش که این همه میلیارد میلیارد دلار و یورو نداشت! ولی شور و هیجان چرا... شما به بازیکنان مثل کالاهای لوکس نگاه می‌کنید که بشود دولا پهنا قالبشان کرد. کار به جایی رسیده که پول شده همه چیزتان. آقای پرز چند سال قبل که بارسا کانسپت جدید نیوکمپ را رونمایی کرد شما هم بلافاصله برای خالی نبودن عریضه و صرفا جهت پز دادن کانسپت دادید. و پارسال وقتی کرونا شروع کرد به تخته کردن همه جا شروع به ساخت کردید. حدود نیم میلیارد یورو هزینه برای نو کردن سانتیاگو برنابئو. در حالی که بارسا کما فی سابق با همان نیوکمپ بی سقف کنار آمده. حالا می‌خواهید برای جبران آتش بزنید به کل فلسفه‌ی رقابت در فوتبال؟؟؟ شرم بر شما. مگر صدای مردم را نشنیدید؟ پس چرا انقدر خودخواهانه بر صحت سوپرلیگتان پافشاری می‌کنید؟ خیال نکنید همتایان پرز انسان‌های فرهیخته‌تری هستند، آنها به همان مقدار شرور و یاغی‌ هستند، با این تفاوت که کمی با‌هوش‌تر. بعد از واکنش هواداران به این پدیده آنها پا پس کشیدند اما پرز همچنان اصرار دارد به برگزاری سوپر لیگش... واقعا چرا؟؟؟؟حرف زیاده برای گفتن و وقت کم. در یک کلام نه به سوپر لیگ. نه بر یکجانبه شدن فوتبال. در روزگاری که همه دم از آزادی بیان و دموکراسی می‌زنند. در زمانی که کم‌‌کم عادتمان شده قبل از هر فوتبال اعتراض و واکنش به یک کنش سیاسی اجتماعی را ببینیم. چون فوتبال را مکانی برای گفتن حرف‌دلها و عقیده‌ها می‌دانستیم. حالا که پای خود فوتبال در میان است سعی کردند بودن نظر خواهی از هواداران خودسرانه رای به تغییر بدهند. پس نباید بگذاریم این فوتبال را از ما بگیرند. فوتبال مال ماست و ما مالکان اصلی فوتبال هستیم نه پرز و امثالهم. والسلام

آمار بازدید پست‌های من در سال ۹۹

افشینم — Thu, 25 Mar 2021 23:36:05 +0430

در طول تاریخ از اعداد استفاده کردیم تا اغلب داد و ستد کنیم و آن‌چیزی که شمردنی است را بشماریم. برای هر عدد واحد درست کردیم تا عددهای زندگی قاطی نشوند و از اعداد، شفاف‌تر استفاده کنیم؛ مثلا وقتی می‌گوییم ده هزار تومان به پول اشاره داریم و وقتی می‌گوییم ده هزار بلیط به بلیط!روز به روز که در زندگی جلو‌تر رفتیم عددها فرقی نکردند ولی این واحدها بودند که زیاد شدند. واحد کریپتو، واحد اصله درخت، واحد فاصله و …«واحد» یک توافق عمومی است برای شمردن؛ تا همانطور که گفتم شمردن‌ها قاطی نشود. مشاهده افراد دارای ثروت (اجتماعی یا مالی) به من ثابت کرده اینکه چه چیزی را بشماریم از اینکه چطور بشماریم مهم‌تر است. هرکس با واحد خاصی مسائل زندگی را می‌شمارد. اینطور به نظرم آمده که مشخص کردن واحد یعنی مشخص کردن اینکه من در زندگی برای چه چیزهایی ارزش قائلم و می‌خواهم چه چیزهایی را در زندگی بشمارم. https://cdn.virgool.io/annual-report/1399/weji79zhe59n-bj0or.mp4 اعدادی که بدون واحد ثبت کردمبه ویدیویی که ویرگول برایم ساخته که نگاه می‌کنم میبینم که در سال ۹۹، من در مجموع ۳,۴۵۷ کلمه در ویرگول نوشتم و منتشر کردم و مخاطبین، پست‌های من را ۷ مرتبه پسندیدند و ۴ بار هم نظر خود را روی پست‌های من به اشتراک گذاشتند. در سال ۹۹، ۲ نفر در ویرگول من را دنبال کردند تا پست‌های بعدیم را بخوانند. این اعداد نشان میدهند من کاری کرده‌ام. هرکدام به واحدی وصل هستند. از خودم می‌پرسم من کدام واحد را شمارش کرده‌ام؟ کدامیک از واحدهای بالا از همه برای من مهم‌تر است؟ ادامه ویدیو را می‌بینم.آمار از اثر بیرونی می‌گویندطبق آمار پست‌های من ۲۴۲ بار خوانده شدند و ۲۰,۹۵۹ ثانیه صرف مطالعه آنها شده است، که با توجه به جمعیتی که در ایران به اینترنت دسترسی دارند، ویرگول به من می‌گوید که توانستم ۰/۰۰۰۲۸۷۳۴۶ ثانیه، سرانه مطالعه دیجیتال کشور را بالا ببرم.از طرف دیگر ویرگول به من می‌گوید که اگر قرار بود پست‌هایم را چاپ و به دست تک تک خوانندگان برسانم باید ۱,۰۰۲ کاغذ مصرف می‌کردم.آن عددهای کوچک ابتدای ویدیو حالا تبدیل شده‌اند به عددهای بزرگ به اینکه من جلوی مصرف این تعداد کاغذ را گرفتم یا به اینکه من ۰/۰۰۰۲۸۷۳۴۶ ثانیه، سرانه مطالعه دیجیتال کشور را جابه جا کرده‌ام. واحد این عددها برای من ملموس‌تر است.واحد نوشتن چیست؟همه عددهای بالا و همینطور اثر بیرونی که روی خوانندگان و همینطور در مقیاس بزرگتر طبیعت و جامعه اطرافم گذاشتم اعدادی هستند که من دوستشان دارم و به آنها افتخار می‌کنم. اگر چنین ویدیویی دست شما نیز رسید به شما بابت تک تک اعداد تبریک می‌گویم.اثر هر نوشته تا حدودی معلوم است، اگر بنویسید جلوی قطع درخت را می‌گیرید، به سرانه مطالعه کشور اضافه می‌کنید و خوانندگانی جذب می‌کنید که شما را از طریق نوشته‌هایتان می‌شناسند و …به نظرم می‌رسد که نوشته‌های من و شما واحد ندارند ولی اثر بیرونی دارند.

در ستایش بطالط با ط دسته دار

افشینم — Thu, 25 Mar 2021 23:31:55 +0430

خب سال نو مبارک صد سال به این سال‌ها و روزگارتان فرخنده و میمون، روز‌های عیده و چپیدیم تو خونه‌هامون و داریم از بی حوصلگی کمر درد می‌گیریم. فکر کنم همین بهانه خوبی باشه برای پادکست گوش دادن، اگه اهل رادیو هستید که روز خوش، اگه نه تا تهش رو بخونید؛ ته پست.پادکست چیزی شبیه به رادیو هستش که برعکس رادیو هرچیزی که دلبخواه آقایون مسئول باشه رو تو حلق مخاطب نمی‌کنه، یعنی شما آزاد آزاد هستید که هرچی دوست دارید گوش بدید و الی آخر، برید سرچ کنید پادکست چیست چیزای بیشتری دستگیرتون می‌شه.توی این پست قصد دارم چند تا از پادکست‌هایی که خودم گوششون می‌دم رو معرفی کنم چون این روزها فرصت خوبیه برای خلوت کردن و یادگیری و … از حق نگذریم یه سری از دوستای پادکستر عالی دارند پیش میرن و های کلاس تولید محتوا می‌کنند دمشون گرم.-آلبومهر آلبوم موسیقی یک داستان داره، اینکه آرتیست از کجا شروع کرده و چجوری به این سطح از موفقیت دست پیدا کرده و … بردیا برجسته نژاد تو هر اپیزود از پادکست آلبوم درباره‌ی ماجرای یک آلبوم موسیقی حرف می‌زنه. از گروه‌های AC/DC و Queen و Led Zeppelin و Eagles و متالیکا و … گرفته تا سولو آرتیست‌هایی مثل شنایا توین و آدل و مایکل جکسون و … خلاصه برید و گوش بدید تا موسیقی رو از یه بعد جدید بشنوید. جدیدا هم یه اپیزود‌های ویژه هم داره موسوم به ویژبوم که جدید‌ترین آلبوم‌ها رو معرفی می‌کنه.پادکست آلبوم در کست‌باکسطبقه ۱۶سهیل علوی تو هر قسمت از طبقه ۱۶ به سراغ موضوع‌های مختلف می‌ره فری‌لنسری و طراحی نرم افزار و مدیریت پروژه و … خب شاید این خیلی چیز مهمی نباشه چون به هر حال خیلی‌ها در مورد بازار کسب و کار و همچین موضوعاتی خیلی حرف زدن، چیزی که تفاوت رو برای طبقه ۱۶ رقم می‌زنه اینه که سهیل با اهلش صحبت می‌کنه و تالک‌شو مانند برای هر قسمت با کسی که خبره و استاد اون موضوع باشه صحبت می‌کنه. حتما طبقه ۱۶ رو گوش بدید چون جدا از موضوع اپیزود خیلی چیزهای دیگه ازش یاد می‌گیرید.پادکست طبقه ۱۶ در کست‌باکسواوکستباورتون میشه که فقط ۶ اپیزود داره(البته فعلا) اما اومده تو لیست؟ واوکست یا پادکست واژه‌گان درمورد کلمات و ریشه‌ی کلمات و واژه شناسی و زبان شناسی هستش، قسمت‌هاش از لحاظ زمانی خیلی کوتاه هستش ولی در عوض بار معنایی زیادی داره. برای اینکه بفهمید چی شد که به گاو می‌گیم گاو نه چیز دیگه یا اینکه چرا انگل و پلیس و انگبین و سپهر و ستاره و در نهایت ویروس تاجدار که این روز‌ها ترند شده و پایین بیا هم نیست، رو با این اسامی می‌شناسیم، واوکست انتخاب هوشمندانه‌ای هستش.پادکست واوکست در کست‌باکسناوکستروشن آبادی، همون کسی که واوکست رو تولید می‌کنه کتاب انسان خردمند هراری، که در ایران خواندنش ممنوع شده، رو به صورت یک پادکست در آورده که قسمت قسمت ضبط میشه و هنوز هم ضبطش ادامه داره. به امید روزی که هر انسانی آزادی عمل و اندیشه داشته باشه و هیچ کسی سانسور نشه. ناوکست جز پادکست‌هایی هستش که به خیلی‌ها توصیه می‌کنم بشنونش. حتما به پیج اینستا ناوکست سر بزنید.پادکست ناوکست در کست‌باکسوب‌سایت ناوکستدایجست | Digestttفرشاد محمودی در دایجست سعی داره هر چیز و موضوعی که در اطراف و اکناف ما در حال رخ دادن هست رو به زبان خیلی ساده و محاوره توضیح بده، برای مثال چرا کاتالانیا و اسپانیا دعوا دارند؟ چرا فلسطین برای رهبران مذاهب این همه مهمه؟ انتخابات آمریکا چجوری برگذار میشه؟ فمینیست چیست؟ اتانازی یعنی چه و … محمودی با کمک یه تیم کار تولید محتوا رو انجام میده، تحقیقات گسترده انجام می‌دن و خیلی کارشون درسته، دمشون هم گرم.پادکست دایجست در کست‌باکسوب‌سایت رسمی دایجسترادیو گیک / RadioGeekو این بار جادی نگاه متفاوت اما ساده داره بر اتفاقات و رویداد‌های تکنولوژی و برنامه نویسی دنیا. این پادکست نسخه‌ی تصویری هم اضافه کرده و چند قسمت آخرش رو میتونید تو کانال یوتیوب جادی ببینید، اگر علاقه مند به این تاپیک هستید رادیو گیک رو از دست ندید، قسمت ۱۲۰ ام هم پخش شد. رادیو گیک رو تلگرام و اکثر پادگیرها هست.پادکست رادیو گیک در کست‌باکسدیالوگ باکسمهدی ستودی و تیم خوبش دیالوگ باکس رو با این ایده ساختند که در هر اپیزود چندتا فیلم رو بیارن و دیالوگ‌های خوب و ماندگارش رو جدا کنند بینشون موسیقی، مش‌آپ، خوانش شعر و متن بذارن. این کار خیلی خوب بود و دیالوگ‌باکس خیلی موفق هستش و پر مخاطب. اما در همین خلاصه نشد، بیوگرافی‌های فوق‌العاده‌ای داره از هوشنگ ابتهاج و فرهاد مهراد گرفته تا بیوگرافی استاد محمد رضا شجریان رو می‌تونید تو دیالوگ‌باکس گوش بدید. کار دیگه‌ای که دیالوگ‌باکس انجام داده همکاری با احسان عبدی پور هستش و پخش داستان‌ کوتاه‌های احسان با صدای خودش در دیالوگ‌باکس. نام این پست هم نام یکی از داستان‌های احسان هستش در دیالوگ‌باکس، در ستایش بطالت، اون ط دسته دار از کجا اومد هم خدا می‌دونه. به اینستا و کانال تلگرام دیالوگ باکس هم سر بزنید. یه پست هم داشتم قبلا به نام “از آخرین باری که دیدمت…” هم از این پادکست هستش.پادکست دیالوگ‌باکس در کست‌باکسوب‌سایت دیالوگ‌باکساحسانواحسان عبدی پور و داستان‌هاش، جدیدا هم قسمت‌هایی از برنامه کتاب‌باز سروش صحت که خود احسان در پخش‌هایی مجری هستش رو هم به صورت صوتی در پادکست احسانو می‌ذاره. حتما داستان‌های احسان رو بشنوید.پادکست احسانو در کست‌باکسسوینا – سینمای نابینایانامیر سلیمانی نابینا که علاقه شدید داره به سینما اومد با کمک یه تیم خوب برای فیلم‌های سینمایی فایل صوتی مخصوص نابینایان درست کردن. یه این شکل که در جاهایی از فیلم که بازیگران دیالوگ ندارند راوی فیلم شروع بو توضیح دادن میزانسن، دکور، لوکیشن و حس و حال بازیگران و … می‌کنه. واوووو چه ایده‌ی خلاقانه‌ای و با تشکر از همکاری خانم گلاره عباسی و بخصوص برنامه ‌ی شب یلدای سال ۹۸ رضا رشید پور الان خیلی از بازیگران مطرح به کمپین سوینا اضافه شدن. شما هم معرفی کنید.سوینا تالک‌شو های خوبی داره با بازیگران و صاحب نظران سینما که می‌تونید به صورت فایل صوتی و پادکست بشنویدش. محور اصلی فعالیت تیم سوینا وب‌سایت خودشون هستش و خیلی دیر به کست باکس اومدن و متاسفانه آخرین پستشون در کست‌باکس برای یک ماه قبل هستش.وبسایت گروه سوینافوتبال لببرای عاشقان فوتبال، هادی نوری و رفقاش پادکست تحلیلی فوتبال روز اروپا به خصوص انگلیس که مهد فوتبال دنیا هست رو به صورت خیلی جدی کار می‌کنن. عالی هست و به قول خودشون تحلیل‌هایی که اینجا می‌شنوید رو هیچ‌جا نمیتونید بشنوید چون واقعا فوتبال فهم هستند و دید بازی دارند. فوتبال لب کامل و بدون جا انداختن حتی یه ویرگول فوتبال رو تحلیل می‌کنند و معمولا مدت زمان هر اپیزودشون سه تا چهار ساعتی هست.پادکست فوتبال لب در کست‌باکسفوتبال ۱۲۰پادکست رسمی برنامه فوتبال ۱۲۰ که به تهیه کنندگی عادل فردوسی پور در شبکه ورزش پخش می‌شه. این پادکست هم خیلی خوبه و تحلیل‌های خوبی می‌تونی بشنوید اما بر خلاف فوتبال لب محدودیت زمانی داره که باعث میشه خیلی سریع بازی‌ها رو تحلیل کنند و به خیلی از بازی‌ها هم که نمی‌رسند. اما برنامه ریزی مرتب و حساب‌شده در تولید و پخش امتیاز برتری رو به نسبت فوتبال لب داره. پادکست فوتبال ۱۲۰ سه شنبه‌ها و جمعه‌ها منتشر میشن و مدت زمان هر اپیزود تقریبا یک ساعت هستش، پس اگر مدت زمان براتون مهمه این پادکیت انتخاب هوشمندانه‌تری هستش. مجریان این پادکست آرش حقیقی و پویان عسگری هستند و دمشون هم گرم. فوتبال ۱۲۰ رو می‌تونید تو کانال تلگرام خود فوتبال ۱۲۰ پیدا کنید.پادکست فوتبال ۱۲۰ در کست‌باکسدوستان این پادکست‌ها رو شخصا میشنوم و مخاطبشان هستم. خوشبختانه تعداد پادکست‌های خوب روز به روز بیشتر و بیشتر می‌شود. می‌توانید علاوه بر این‌ها پادکست‌آن، رادیو مرز، رادیو چهرازی، ChannelB، BPlus، رادیو دیو، ده صبح و ده‌ها پادکست دیگر را در اپ‌های پادگیر پیدا کنید و گوش بدهید.اگه لوس نشه تهش هم بگیم هر روزتان نوروز و نوروزتان پیروز.

Tailwind: طراحی واکنش‌گرا

افشینم — Fri, 21 Aug 2020 22:28:22 +0430

خب طرحمون تا اینجای کار یه شکل کلی به خودش گرفته اما توی نمایشگر‌هایی با رزولیشن‌های مختلف کلا به هم می‌ریزه و اون چیزی نیست که می‌خوایم. این دو تا تصویر رو ببینید:خروجی کارمون در دستگا‌ه های با عرض کم مثل تبلت و موبایلخروجی کار روی دستگاه‌هایی با عرض بیشتر مثل تلویزیون و لبتاپو این چیزی نیست که ما می‌خوایم. قصدم ما اینه که در دستگاه‌های عریض تصویرمون بیاد سمت چپ نمایشگر و متن و دکمه‌ها بیان سمت راست و در دستگاه‌های کم عرض به همین شکل باقی بمونن با این تفاوت که از چپ و راست فاصله بگیرن و بیان وسط تصویر. خروجی نهایی کار رو می‌زارم که متوجه بشید:خروجی کار در دستگاه‌های عریضخروجی کار در دستگاه‌های موبایل و تبلتخب الان که می‌دونیم دقیقا بایدچه کاری بکنیم اول از همه باید ساختار ساختمان طرح رو کمی تغیر بدیم. پس یک div می‌سازیم و به اون کلاس flex می‌دیم که در واقع display دی‌ای‌وی رو برابر flex قرار می‌ده. حالا کل طرح رو منتقل می‌کنیم به این div. داخل همین div با کلاس flex و زیر div طرحمون یه div می‌سازیم و داخلش یه کپی از img عکس قرار می‌دیم که فعلا یه کپی از عکسمون اون زیر نمایش میده ولی می‌خوایم با فلکس تصویرمون رو به دو نیم تقسیم کنیم که می‌گم چطوری. برای اینکه سر در گم نشید این کد رو ببینید:شروع طراحی واکنش‌گرادر Tailwind به صورت پیش‌فرض چهار نقطه‌ی شکست (BreakPoint) تعبیه شده.sm: برای عرض کم min-width: 640pxmd: برای عرض متوسط min-width: 768pxlg: برای عرض زیاد min-width: 1024pxxl: برای عرض خیلی زیاد min-width: 1280pxخب حالا چطوری از این‌ها استفاده کنیم؟ خیلی راحت. توی طرح می‌خوایم عکسمون در حالت عریض مخفی بشه و عکس سمت چپ نمایش داده بشه پس برای عکس اصلی کلاس lg:hidden رو اضافه می‌کنیم که به این معنی که در دستگاه‌هایی که کمینه‌ی عرضشون 1024 هست display این عکس رو برابر none قرار بده و وقتی عرضمون کمتر از 1024 بود باز اون رو بلاک کن. پس باید برای عکسی که می‌خوایم سمت چپ نمایش داده بشه هم به شکل زیر کلاس بدیم:به صورت پیش فرض display:none و در دستگاه‌های عریض display:block باشه. برای اینکه دو تا دیو اصلی که داخل دیو فلکس هستند عرض 50٪ در نظر بگیره به هردو کلاس lg:w-1/2 رو می‌دیم.پس به همین راحتی یکی از نقاط شکست رو می‌نویسیم یه : جلوش می‌ذاریم و استایل مد نظرمون رو می‌نویسیم. به کد زیر نگاه کنید کامل متوجه می‌شید که چکار کردم. این کد دیو محتوای اصلیمون هستش که لوگو و عکس و متن‌ها داخلش قرار دارند:max-w-md: بیشترین عرض رو برابر 28rem قرار دادیم که برای دستگاه‌های با عریض خیلی باریک میشه پس:sm:max-w-xl : این رو قرار دادیم که در دستگاه‌های عریض یعنی از 640px به بالا max-width رو برابر 36rem قرار دادیمmx-auto: برای اینکه در هر صورت مارجین چپ و راست auto باشهlg:w-1/2 : رو گفتم که برای اینکه در صفحات عریض عرض این دیو بشه 50٪ و بیاد سمت راست.lg:max-w-full : در صفحات عریض عرض دیو برابر 100٪ قرار بگیرهlg:py-20 lg:px-12 : چون در صفحات عریض عکس داخل این دیو مخفی میشه پس متن‌ها می‌چسبند به بالای تصویر برای اینکه بیان وسط عکس روبه‌رو از مارجین عمودی و افقی بیشتر استفاده کردیم.کاور کردن عکس‌هاعکسی که در صفحات عریض سمت چپ تصویر نمایش داده می‌شه عرض و ارتفاع نامناسبی داره پس برای حل این مشکل اومدم این کار رو کردم یه نگاه ‌به کد‌ها بندازید:به دیو کلاس lg:relative دادیم که در صفحات عریض position: relative بشه این باعث میشه که وقتی به عکسی که داخل این دیو هست position: absolute بدیم بتونیم داخل المان مادر به راحتی جا به جاش کنیم. چون هر دوی این دیو‌ها رو داخل یک دیو با کلاس flex قرار دادیم پس ارتفاع این دیو برابر ارتفاع دیو بغل دستیش(همونی که متن‌ها و لوگو و ... توش هستند) قرار داده می‌شه. پس می‌خوایم ارتفاع عکس به اندازه‌ی ارتفاع دیو بغل دستی کشیده بشه و عرضش هم بشه 100٪ المان مادرش، برای این کار این چند کلاس رو به عکس می‌دیم:inset-0: چپ و راست بالا و پایین رو برابر 0 قرار می‌ده.h-full: ارتفاع رو 100٪ المان مادرش قرار می‌دهw-full: عرض رو 100٪ المان مادرش قرار می‌دهاین دو تا باعث میشن که نسبط عرض و ارتفاع عکس بهم ریخته بشه و عکس یا خیلی از هر دو طرف کشیده بشه برای رفع این مشکل پوزیشن عکس رو باید کاور کنیمobject-cover: عکس رو کاور میکنهobject-center: عکس از وسط نشون می‌ده که اگه عرض تغیر کرد از چپ و راست بریده بشه و شکل کلی عکس حفظ بشه.یه مرور کلی:تمام استایل‌هایی که در درس قبلی یاد گرفتیم رو می‌تونیم در حالت رسپانسیو هم استفاده کنیم و مقادیر رو تغیر بدیم. به عنوان مثال h1 که در درس قبلی بهش فوت سایز و فونت استایل دادیم توی دستگاه‌های عریض کوچک به نظر می‌رسه پس می‌تونیم بهش استایل بدیم:فایل تمرینی رو از اینجا بگیرید و کامل ببینیدش. خب توی درس بعدی با نحوه‌ی تغییر hover - focus - active و ... دادن به المان‌ها آشنا می‌شیم که در Tailwind به مراتب خیلی سریع‌تر و راحت‌تر می‌تونیم این کار رو بکنیم.این پست رو همچنان می‌تونید از وبلاگ و ویرگول بخونید.

معرفی بازی: Oddmar

افشینم — Sun, 16 Aug 2020 16:50:34 +0430

Oddmarادمار یک بازی در سبک اکشن و ماجراجویی یک نفره است که زندگی یک پسر بچه‌ی وایکینگ رو به تصویر میکشه. وایکینگ‌ها او را بخاطر اشتباهات گذشته خود لایق جایگاهی در والهالا نمی‌دانند و برای ادمار هیچ احترامی قائل نیستند‌. در نهایت به او یک فرصت مجدد داده می‌شود، اما به چه قیمتی... ادمار برای محافظت از گله‌ها و همنوعاش با دشمنای خبیث و افسانه‌ای، اکثرا از افسانه‌های وایکینگ‌ها گرفته شده، مبارزه میکنه و الی آخر...گیم پلیگرافیک بی‌نظیر بازی، ساخت محیط بسیار جذاب برای بازی، منو و گیم مپ فوق‌العاده زیبا همه و همه از نقاط قوت بازی محسوب می‌شوند. در همان مرحله اول بازی نحوه‌ی بازی کردن و کنترل کاراکتر نمایش داده می‌شود. در یک، دو مرحله‌ی اول بازی بسیار ساده به نظر می‌رسد با کلی جذابیت! اما خیلی سریع متوجه می‌شوید که به این سادگی‌ها هم نیست و حسابی به چالش کشیده می‌شوید و برای حل مراحل بار‌های بار کاراکتر را به کشتن می‌دهید.بازی دارای چهار فصل است. هر فصل پنج مرحله دارد و انتهای هر فصل یک مرحله‌ی نهایی وجود دارد که از پایه متفاوت است با سایر مراحل. به قول دوران بچگیمون، میشه این مرحله رو مرحله‌ی غول بدونیم. حل کردن این مرحله کلیدی برای باز شدن فصل بعدی هستش. هر مرحله‌ی عادی(به جز مرحله‌ی آخر هر فصل) از شما سه چیز می‌خواهد. ۱- جمع کردن سکه‌ها به تعدادی که هر مرحله از شما می‌خواهد، ۲- پیدا کردن سه سکه‌ی سری که به خودی خود نوعی چالش محصوب می‌شود، ۳- به پایان رساند مرحله قبل از زمان مقرر شده. یا در بعضی مراحل به جای زمان از شما می‌خواد که عالم رویا یا Dream World را به انتها برسانید. نکته: به وضوح نمی‌شود در یک مرحله هر سه شرط بازی را فراهم کرد. پس می‌توان چند بار تلاش کرد. به عنوان مثال یک بار با سرعت رفت که شرط زمان برسید و یک بار با آرامش تا سکه‌ها و سکه‌ی سری را پیدا کنید.نکته۲: من در پایان فصل یک این پست را نوشتم پس شاید در فصل‌های بعدی ماجرا کاملا متفاوت باشد.نکته۳: عالم رویا یا Dream World یه مرحله اختیاری داخل مراحل هستش که می‌تونید ازش بگذرید. هر مرحله‌ای عالم رویا نداره به عنوان مثال تو فصل یک بازی فقط مرحله‌ی ۳ و ۴ عالم رویا دارن. برای رفتن به اون هم باید نزدیک یه جانوری که اصلا نفهمیدم چیه بشید تا یه گازی که از دهنش خارج میشه بپاشه تو صورت ادمار که باعث میشه ادمار بی‌هوش بشه و بره به عالم رویا.سکه‌هاسکه‌های مثلثی و تو خالی که در هوا آویزان هستند و فقط کافیست بپرید تا به آنها برخورد کنید و تمام... اما در بعضی مراحل از شما تعداد بیشتری سکه می‌خواهد. جانورانی که سد راه‌تان می‌شود را با شمشیر بکشید که سکه بگیرید. بعضی از صندوق‌ها هم زیرشان سکه دارند و...این هم تصاویری از محیط بازی:حجم این بازی تقریبا زیاد است. حدود ۱ گیگابایت. وبه جز انگلیسی هیچ زبان دیگری ندارد. این‌ها ممکن است نقاط ضعف بازی طلقی شوند. همچنین بازی آفلاین است.

Tailwind: استایل‌های پایه

افشینم — Wed, 12 Aug 2020 00:21:09 +0430

مقدمه: در پست اول Tailwind گفتم که برای استایل دادن به یک المان باید یک کلاس اتریبیوت ایجاد کرد و داخل "دابل‌کوتیشن" کلاس‌های مد نظرمان را بنویسیم. ”text-4xl font-bold text-center text-blue-500 mt-12″ این چند کلاس را هم تعریف کردیم. حالا برای اینکه بفهمیم mt-12 یعنی چی و چرا از text-4xl استفاده کردم و ... این پست رو دنبال کنید.برای سهولت کار شروع می‌کنم به طراحی یک وب‌پیج واقعی و البته خیلی مختصر که کلیات کار دستتون بیاد و بتونید راحت و خیلی سریع طراحی کنید. به فایل اچ تی‌ام ال بروید و شروع کنید به کد زنی. در زیر تصویر نهایی خروجی این پست رو می‌زارم:طرح نهاییرنگ‌هابه تگ بادی کلاس {‌ bg-gray-100 } رو دادم. که رنگ خاکستری خیلی روشن رو برای بگکراند بادی در نظر می‌گیره. در Tailwind رنگ‌ها به صورت پیش‌فرض نوشته شده‌اند و ما فقط آنها را انتخاب می‌کنیم. لیست رنگ‌ها شامل black - white - gray - red - orange - yellow - pink - green - teal - blue - indigo - purple هستش که به جز سیاه و سفید که تگ رنگ هستند مابقی رنگ‌ها 9 طیف رنگی را شامل می‌شوند. به عنوان مثال gray-100 تا gray-900 که هرچه عدد بزرگ‌تر باشد رنگ تیره تر می‌‌شود. پس orange-300 یه رنگ نارنجی مایل به سفید می‌شه و orange-900 نارنجی تیره (قهوه‌ای مانند) و الی آخر.سیستم رنگ همینه و برای زمینه، متن، حاشیه و ... می‌تونیم اون‌ها رو انتخاب کنیم. و نحوه‌ی کاربردش خیلی راحته، بدین صورت که روی تگ مورد نظری که می‌خواید مثلا رنگ زمینه‌اش بشه سبز روشن بنویسید bg-green-400 یا 300 یا 500 و... bg به معنی background هستش.برای تغییر رنگ متن کافیه به قبل از کد رنگ مورد نظر عبارت text رو اضافه کنید. مثلا برای رنگ آبی نفتی text-blue-800 و برای رنگ صورتی روشن text-pink-300 و ... رو وارد کنید.برای تغییر رنگ حاشیه‌ها از border و برای متن جایگزین در فرم‌ها از placeholder استفاده کنید مثلborder-gray-500 یا placeholder-teal-700جدا از این‌ها برای رنگ می‌توان از -transparent یا -currentColor استفاده کرد. که کمتر مورد استفاده قرار می‌گیرندسیستم اندازه‌ها و مقیاسدر قسمت رنگ‌ها متوجه شدیم که این‌رنگها از پیش تعیین شده هستند. برای مثال اگر رنگ متن و رنگ حاشیه را blue-500 بذاریم برای هر دو #4299e1 اعمال می‌شود. پس سیستم اندازه هم همینه. برای تغییر اندازه‌ی margin یا padding یا width و... از مقادیر پیش فرض بسته به پروژه‌ انتخاب می‌کنیم. به عنوان مثال برای اعمال مارجین 16px باید بنویسیم m-4. حالا این چهار از کجا اومد رو بعدا می‌فهمید. برای اعمال مارجین به یه سمت خاص از المان هم اینگونه عمل می‌کنیم. برای مارجین بالا (margin top) باید از mt استفاده کنیم و برای راست، پایین و چپ به ترتیب mr و mb و ml هستش. برای مارجین در محور عمودی از my و محور افقی از mx استفاده می‌کنیم. m تنها هم که از هر چهار طرف مارجیم اعمال می‌کنه. پس اگر بخواهیم به یک المان 32px مارجین در جهت افقی بدیم و 16px عمودی باید بنویسیم: mx-8 my-4.اگر هم بخواهیم می‌توانیم از مقدار auto برای هر کدام از جهات استفاده کنیم. اگر بخواهیم یک تگ در وسط تصویر قرار بگیرد باید mx-auto را انتخاب کنیم. پدینگ هم به همین صورت کار می‌کنه p برای همه‌ی جهات، pt پدینگ از بالا، pl پدینگ از چپ، pr پدینگ راست و pb پدینگ پایین هستش.خب حالا اون چهار که گفتم بعدا می‌فهمیم از این جدول میاد. 1 rem برابر 16px هستش. یه نگاه به جدول بندازید:جدول سایز‌هایی که برای margin padding width height و… استفاده میشن اصلا نترسید یکم که باهاش کار بکنید دستتون میاد. برای اینکه بدونید 10 که 2.5rem هستش می‌شه چند پیکسل اون رو ضرب 16 بکنید. یه کار راحت تر سر زدن به این وب‌سایت هستش. حالا می‌تونیم برگردیم به طراحی. در داخل تگ بادی یه div بسازید که قراره بشه کانتینرمون. بهش کلاس‌های “class=”px-8 py-10 رو بدید که معنیش میشه پدینگ راست و چپ بشه 32px و پدینگ بالا و پایین بشه 40px.لوگو:یک تگ img اضافه کنید و سورس لوگو رو وارد کنید و یک کلاس h-16 بههش بدید. h به معنی height هستش و 16 هم از جدول اندازه‌ها گرفته شده که می‌شه 4rem. از اینجا به بعد دیگه توضیحش نمی‌دم اون جدول رو. برای img اگه یکی از طول یا عرض رو وارد کنید به صورت اتوماتیک اون یکی تنظیم می‌شه.نکته: برای تنظیم عرض هم باید از w استفاده کنیم. مثلا w-48 میشه عرض 12rem یا 192px!عکس اصلی:یک تگ img اضافه کنید و سورس عکس رو وارد کنید و یک کلاس "class="mt-6 rounded-lg shadow-xl بهش بدید. rounded: برای اینکه لبه‌های تصویر خمیدگی بگیره استفاده می‌شه. در واقع border-radius رو به تصویر میده. که 6 سایز مختلف رو هم در بر می‌گیره از جدول زیر می‌تونید یکی رو انتخاب کنید:یه نکته برای اینکه یه تصویر به صورت گرد دیده بشه می‌تونید از rounded-full استفاده کنید که میشه به عبارتی رادیوس 50٪.جدا از اینها اگر قصد دارید به یک ظلع خاص رادیوس بدید کافیه یکی از چهار حرف t, r, b, l رو به کاربگیرید. برای رادیوس به بالا باید rounded-t و برای اینکه یک رادیوس بزرگ‌تر بدیم به پایین باید rounded-b-lg رو بنویسیم. اگر هم خواستید فقط به یک گوشه خمیدگی بدید مثلا گوشه‌ی بالا و راست باید rounded-tr رو بنویسیم. tl میشه بالا و چپ. bl و br هم به ترتیب میشن پایین چپ و راست.shadow: هم برای سایه دادن به المان یا همون box-shadow به کار میاد. اگر خواستید سایه به خارج المان داده بشه shadow-outline و اگر خواستید به داخل المان داده بشه shadow-inner و اگر خواستید کلا سایه نداشته باشه shadow-none رو وارد کنید. سایه‌ها در 7 سایز مختلف قابل تنظیم هستند. همگی اون‌ها تونالیته‌ی رنگ خاکستری هستند. به ترتیب از کوچیک به بزرگshadow-xsshadow-smshadowshadow-mdshadow-lgshadow-xlshadow-2xlمتن‌هایک تگ h1 وارد کنید متن عنوان رو بنویسید و به اون کلاس‌های "class="mt-6 text-gray-900 text-2xl font-bold leading-tight بدید. تا اینجای کار با mt-6 و text-gray-900 آشنا شدیم. اندازه‌ی متن: اینجا از text-2xl استفاده کردم. شما هم می‌تونید از یکی از مقادیر جدول زیر استفاده کنید.ضخامت فونت: یا font-weight در اینجا از font-bold استفاده کردم. ضخامت فونت 9 مقدار دارد که در جدول زیر آوردمفاصله‌ی سطر‌ها: line-height رو اینجا با leading-tight مشخص کردم که برابر 1.25 هستش. سایر مقادیر هم توی جدول زیر می‌زارم:فاصله‌ی حروف: اینجا برای ما کاربردی نداشته ولی درکل لازم می‌دونم گفته بشه برای فاصله دادن به حروف از tracking استفاده می‌کنیمجمع بندی: خیلی چیز‌ها یاد گرفتیم و با همین‌ها می‌تونیم طرحی شبیه به اون چه که اول پست گذاشتم طراحی کنیم. برای مثال دکمه‌ای که در آخر گذاشتم رو ببنید:اطلاعات بیشتر و ثبت نام در توربه جز inline-block با همه‌ی استای‌ها آشنا شدیم. برای تغییر display از inline-block استفاده کردم. چون تگ ‌‌a به خودی خود این‌لاین هستش و اگه بلاک نباشه پدینگ عمودی نمی‌گیره. سایر کلاس‌ها هم میشن hidden که display رو none قرار می‌ده و inline, inline-block, inline-flex, flex, table, grid و ... هم هستند. پس اگر خواستید ‌‌display رو برابر flex در نظر بگیریم فقط کافی توی کلاس خود عبارت flex رو بنویسیم.فکر کنم تا همین جا کافی باشه. چون خیلی طولانی میشه و حوصله سر بر ‌خواهد بود. حالا یاد گرفتیم که یه طرح بیسیک پیاده کنیم در پست بعدی درباره‌ی focus، hover, active و طراحی رسپانسیو در tailwind حرف می‌زنیم.نظر فراموش نشه لطفا!برای دسترسی به سورس‌کد‌ها به گیت‌هاب سر بزنید.همچنین می‌تونید این پست رو در @افشینم و ویرگول بخونید.بدرود

Tailwind لذت استایل نویسی

افشینم — Fri, 07 Aug 2020 16:38:57 +0430

A utility-first CSS framework for rapidly building custom designs.این توضیحی است که وب سایت توسعه دهنده‌ی Tailwind درباره‌ش گفته. یک چهارچوب برای هرچه سریع‌تر طراحی کردن وب‌سایت‌ها. در واقع Tailwind یک پیش پردازنده (preprocessor) برای css نویسی نیست. مجموعه‌ای از استایل‌های از قبل نوشته شده که می‌توان باسرعت در فایل HTML از آنها را استفاده کرد، البته نه تا این حد ساده. در واقع این پست برای توضیح دادن و شناسوندن Tailwind نیست و در این پست نحوه‌ی استفاده و کانفیگ کردنش رو آموزش می‌دم. دلیلم هم برای این کار این بود که خودم خیلی سرچ کردم تا تونستم نصبش کنم و فکر کردم یک منبع به زبان فارسی برای متقاضی بعدی ممکنه کار رو راحت تر بکنه. همین. در ادامه نحوه‌ی نصب و کانفیگ کردن Tailwind رو توضیح می‌دم.پیش‌نیاز این آموزش تسلط و یا حداقل آشنایی با:html و css و nodejs هستشقدم اول: نصبقبل از هر چیز یک پوشه برای پروژه تعریف بکنید با هر اسمی. بعد به ترمینال برید، مسیر پوشه رو انتخاب کنید و این دستور رو اجرا کنید.npm install tailwindcss postcss-cli autoprefixertailwindcss: که خود فریم‌ورکهpostcss-cli: در واقع موتور Tailwind هستش و Tailwind به نوعی یک پلاگین محسوب میشه برای postcss که یه پردازنده‌ی css هستش که می‌تونید برای شناخت بیشتر این پست رو بخونید.autoprefixer: یک پلاگین دیگه‌اس برای postcss که باعث می‌شه ما خیلی کوتاه تر بنویسیم. البته همه‌ی این اتفاق‌ها در پشت صحنه اتفاق میوفتهبعد از نصب کامل این سه در پروژه یک پوشه‌ی node_modules درست میشه که ما هیچ کاری باهاش نداریم فقط این رو بدونید که ماژول‌های نود‌جی‌اس که نصبشون کردیم میان اینجا.قدم دوم: کانفیگ‌هابه ترمینال برید و دستور زیر رو اجرا کنیدnpx tailwind initاین دستور فایل کانفیگ Tailwind رو در روت اصلی نصب می‌کنه. این فایل با نام tailwind.config.js ذخیره می‌شه که بصورت پیش فرض خودش اینجوری هستش:module.exports = { purge: [ ], theme: { extend: { }, }, variants: { }, plugins: [ ],}حالا باید فایل کانفیگ postcss رو بسازیم. در کنار فایل کانفیگ Tailwind با اسم postcss.config.js یک فایل ایجاد می‌کنیم و در داخلش می‌نویسیمmodule.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ]}قدم سوم: ساخت استایل‌هایک فایل با مسیر دلخواه بسازید با پسوند css. یا postcss. هر دو رو امتحان کردم. این فایل میشه فایل ورودی استایل‌های شما. من این کار رو اینجوری انجام دادم:project/css/tailwind.cssپوشه پروژهدر داخل فایل tailwind.css بنویسید:@tailwind base;@tailwind components;@tailwind utilities;tailwind base@ استایل‌های کلی و گلوبال رو شامل میشه، مثل ریست‌های بادی، تیتر‌ها عکس‌ها و ....tailwind components@ شمامل استایل‌های میدیا کویری‌های و کانتینر برای قالب بندی کلی پروژهtailwind utilities@ در نهایت لیست کامل استایل‌های تغیر رنگ و سایز و پدینگ و مارجین‌ها و ترانزیشن‌ها و ... اینجاست.حالا باید این سه تا رو که در فایل tailwind.css نوشتیم رو تبدیل کنیم به فایل css ریدابل یا خوانا برای استفاده در پروژه.برای اکسترکت کردن استایل‌ها به فایل package.json برید که در همون مراحل ابتدایی نود‌جی‌اس اون رو درست کرده و این کد رو بهش اضافه کنید:"scripts": { "build": "postcss css/tailwind.css -o public/build/output.css"},متوجه شدید که چی شده؟ در واقع ما از postcss می‌خوایم که وقتی ازش خواستیم build کنه بیاد فایل css/tailwind.css که در مرحله‌ی قبل ساختیم رو از مسیر مشخص شده بخونه و در o- یا output به مسیر پابلیک/بویلد/ بره و یه فایل با اسم output.css بسازه و استایل‌ها رو درونش قرار بده. اسم فایل و مسیر رو می‌تونید هر جوری که دوست داشتید بنویسید. در واقع من برای اینکه شما متوجه بشید اسم فایل رو output.css گذاشتم. حالا فقط کافی به ترمینال برید و دستور زیر رو اجرا کنید و بوم بوم استایل‌های شما در پوشه‌ای که تعیین کردیم ساخته می‌شهnpm run buildمرحله‌ی آخر: استایل‌نویسییک فایل html بسازید من این کار رو در مسیر root/public ساختم شما هر جور مایلید می‌تونید این کار رو انجام بدیدهمون طور که می‌بینید من آدرس فایل css خروجی رو هم به پیج لینک کردم حالا شروع می‌کنیم به طراحی کردن: با یه عنوان تیتر شروع می‌کنم با متن hello world! و به اون یک کلاس می‌دم به شکل زیر:

Hello World!

در واقع با این چهار کلاس که برای تگ h1 تعریف کردیم استایل‌های زیر رو به اون نسبت دادیم.text-4xl {font-size: 2.25rem;}.font-bold {font-weight: 700;}.text-center {text-align: center;}.text-blue-500 {--text-opacity: 1;color: #4299e1;color: rgba(66, 153, 225, var(--text-opacity));}mt-12 {margin-top: 3rem;}این هم خروجی فایلخیلی راحت می‌تونیم با تغیر مثلا text-blue-500 به text-green-700 رنگش رو از آبی روشن به سبز کمی تیره‌تر تغییر بدیم و ....امیدوارم لذت برده باشید. سعی می‌کنم در یه آموزش دیگه کمی از اساتیل‌ها بگم و طراحی رسپانسیو خیلی راحتتر با Tailwind و ... اگه عمری باقی باشه و بازخوردی خوبی ببینم.موفق باشیدفایل‌های تمرینی رو از گیت‌هاب بگیریداین پست را در جاهای دیگر بخوانیدوبلاگ خودمویرگولمدیوم