پست‌های انتشارات معماران عصر ارتباط

عادات برنامه نویسان موفق یا چگونه برنامه نویس بهتری شویم

امیر بصیری — Mon, 27 Jan 2020 08:45:17 +0330

عادات زیربنای رفتار ما در شرایط مختلف زندگیند. آنها نقش مهمی در مسیر زندگی دارند. عادات خوب می‌توانند سبب موفقیت‌های بزرگ، سلامتی و شادی شوند و در کنار آنها عادات بد می‌توانند زمینه ساز بیماری، حال بد و شکست در زندگی باشند.شما که در حال مطالعه این مطلبید احتمالا برنامه نویس هستید و یا به برنامه نویسی علاقه دارید. حتما در طول روز زمان زیادی برای برنامه نویسی اختصاص میدین. در ادامه این مطلب هفت عادت موثر که باعث پیشرفت در برنامه نویسی می‌شوند را بررسی می‌کنیم.۱- کد تکراری ننویسیداگر در حال نوشتن کدی هستید که حس می‌کنید قبلا شبیه آن را نوشته‌اید، صبر کنید. دقیقا در شرایطی قرار دارید که باید از آن اجتناب کنید.کد تکراری برنامه را خراب می‌کند. کم کم تغییر دادن و اصلاح کد سخت‌تر می‌شود. هر بخش از کد را بخواهید اصلاح کنید، باید کل برنامه را جستجو کرده و هرجا که کد تکرار شده را تغییر دهید. به هر اندازه دقت کنید، باگ‌های کوچک و بزرگ کم کم در کدهای شما ظاهر خواهند شد.قانون DRY (Don't Repeat Yourself) را همیشه در نظر داشته باشید. نوشتن کد تکراری نشانه‌ای است برای اینکه متوجه شوید باید برنامه را ریفکتور کنید. کد و منطق برنامه را به بخش‌های کوچک تر تقسیم کنید و از آن بخش‌ها در جاهای مختلف که نیاز دارید استفاده کنید.۲- وقتی فکر می‌کنید کار تمام شده، ریفکتور کنیدخیلی از برنامه نویس‌ها، مخصوصا آنهایی که تازه کار هستند، فکر می‌کنند وقتی برنامه کار کند فرایند برنامه نویسی تمام شده. ولی برنامه نویسی فقط نوشتن کدی که کار کند نیست.حتما فکر می‌کنید، این کد که کار میکنه! منظورت چیه؟درسته، ولی حتما قبل از اینکه تسک بعدی رو شروع کنید ریفکتور کنین. پس از ریفکتور کردن خوانایی کد بهتر خواهد بود. احتمالا در لحظه اتمام کد نویسی حاصل کار بهترین و بهینه ترین کد ممکن نیست. از نظر خود شما برنامه‌ای که نوشتین خیلی واضح و سرراست است. ولی نظر بقیه برنامه نویس‌ها چیه؟ میتونن به راحتی کد شما رو متوجه بشن؟ریفکتور کردن پیچیدگی کد رو کاهش میده. همین کار کوچیک در دراز مدت نه تنها زمانی که واسه ریفکتور گذاشتین رو جبران می‌کنه بلکه زندگی شما رو به عنوان برنامه نویس راحت تر می‌کنه.۳- روی بیزنس تمرکز کنینبیشتر برنامه نویس‌ها انقدر روی استک و تکنولوژی برنامه نویسی و یادگیری اون تمرکز میکنن که بیزنس رو فراموش می‌کنن. توی مسیری که شروع کردین و سعی دارین که توی یک استک حرفه‌ای بشین بیزنس رو هم توی ذهنتون داشته باشید و بهش اهمیت بدین. باید بدونین که چرا یک محصول رو توسعه می‌دین.بعضی برنامه نویس‌ها فقط روی بخش تکنیکی کارشون تمرکز دارن. اونها اهمیتی به بزینس و فاکتورهای اقتصادی کارشون نمیدن.چیزی که الان روش کار می‌کنین آیا واقعا اهمیت داره و واسه کسب و کاری که توش هستین ارزش افزوده ایجاد می‌کنه یا اینکه فقط دارین وقت تلف میکنین و روی چیزی کار می‌کنین که اهمیتی نداره؟ این سوال مهمیه که باید از خودتون بپرسین.۴- کامیت‌های کوچککامیت‌های کوچک به برنامه نویس این امکان رو میده که توضیحات کاملی درباره کامیت در کامنتش بنویسه. مثلا «درست کردن چند مشکل» توضیحات کاملی برای یک کامیت نیست.اگر کامیت‌های کوچک تری داشته باشید دیباگ کردن کد هم ساده تر میشه. خیلی راحت تر می‌تونین به کامیت قبلی رول بک کنید و ببینین این اروری که ایجاد شده از این کامیت آخر بوده یا نه. وقتی کامیتی رو پیدا کردین که باگ رو ایجاد کرده کدهای زیادی نیست که باید بررسی کنین چون کامیت کوچیک بوده و کدها کم.کامیت‌های بزرگ پیامدهای بدی هم میتونن داشته باشن. چون حجم کد زیاده فهمیدن اینکه دقیقا چه اتفاقی افتاده هم سخت میشه.کسی که کد رو بررسی می‌کنه هم به مشکل میخوره. مرج کردن کد هم کار ترسناکی میشه. چون حجم کد زیادی قراره مرج بشه و ممکنه سیستم رو از کار بندازه.بررسی کد وقتی کامیت‌ها کوچیک تر هستن خیلی ساده تره زیرا در هر زمان میشه یک تغییر رو دید و دقیقا متوجه شد که چه کاری انجام شده.۵- ثبات نکته کلیدی استاگر تصمیم گرفتین متغیرها رو کمل کیس نام گذاری کنین روی همین تصمیمتون بمونین. اگر به جای تب از اسپیس استفاده می‌کنین روی همین تصمیم بمونین و اونو تغییر ندین. هر کاری که روی کدتون انجام میدین حداقل تا آخرش انجام بدین.وقتی که عدم ثبات داشته باشیم به مرور زمان برنامه به وضعیت غیر قابل کنترلی میرسه. افراد مختلف و تیم های جدید روی کد کار میکنن، هرچه این افراد بیشتر باشن و زمان بیشتری بگذره با یک آشفتگی و به هم ریختگی بیشتری در کد روبرو میشیم.خوب چکار کنیم که ثبات بیشتری داشته باشیم؟اولین کاری که باید انجام بدین اینه که یک استایل گاید انتخاب کنید. وقتی استایل گاید انتخاب شد به آن مقید باشید. می‌توانید از لینتر برای چک کردن کدها استفاده کنید.دومین کار نامگذاری یکنواخت است. متغیرها، متدها و کلاس‌ها باید به شکل مشخصی نام گذاری شوند. برای آشنایی بیشتر با روش‌های نام گذاری مقاله «راهنمای انتخاب نام برای برنامه نویسان!» را بخوانید.۶- همون بار اول کد رو تموم کنینبعدا درستش می‌کنم! قبلا همه ما این جمله رو شنیدیم. همه هم میدونیم چقدر بعدا درستش می‌کنیم. هیچ وقت. هروقت که یک کامنت TODO میبینین یعنی یک نفر همون بار اول کار رو انجام نداده و یک مقدار از کارش مونده.وقتی یک تسک رو شروع می‌کنین، انقدر روش کار کنین تا تموم بشه.حالا تموم شدن یعنی چی؟یعنی کد شما واسه شروع باید ریفکتور شده باشه. کد باید تست شده باشه و تست کردن هم واسه اکثر دولوپرها قسمت بدشه. ولی تست کردن فقط این نیست که یک سناریوی معمول رو که خیلی راحته، کلیک کنین برین جلو. مطمئن بشین سناریوهای دیگه رو هم تست می‌کنین. اگه میخواین کار بیشتری انجام بدین تست هم بنویسین.چیزی که میمونه داکیومنته. این ویژگی داکیومنت میخواد؟ به مسئول تست اطلاع دادین که این فیچر رو میشه تست کرد؟ آیا پیش نیازهایی واسه این ویژگی هست که لازم باشه مسئول تست بدونه؟۷- هیچ وقت از یادگیری دست نکشیدتکنولوژی ها هر روز در حال تغییرند. بعضی وقت‌ها خیلی سخت به نظر میرسه که بتونیم خودمون رو به تکنولوژی های روز برسونیم. پس هیچ وقت نباید از یادگیری دست بکشید. زیرا روزی که یادگیری رو ول کنین روزیه که پیشرفتتون متوقف میشه.یادگیری چیزهای جدید تنها راهیه که بتونیم در این عصر توسعه و پیشرفت سرسام آور، توانایی‌های خودمون رو بروز و بدرد بخور نگهداریم.هیچ وقت رشد نخواهید کرد، مگر اینکه سعی کنید کاری فراتر از چیزی که الان در آن استادید انجام دهید. «رالف والدو»

انتخابگرها (Selectors) در CSS یک بار برای همیشه !!

امیرسینا شادکامی — Sat, 18 Jan 2020 18:30:36 +0330

یک سوال/مشکلی که شاید برای خیلی ها در هنگام "یادگیری/انجام کار" پیش اومده باشه این است که در انتخاب Selector دچار شک/اشتباه میشوند و درون یک لوپ اذیت کننده گیر می‌کنند به دلیل ندانستن سلکتور مناسب پس بعد از مدت زمانی درگیری، تسلیم شده و بجای استفاده از سلکتور مناسب روی می‌آورند به DOM Manipulation با استفاده از جاوا اسکریپت یا از اون بدتر تغییر دادن DOM Structure !!‌ .سی اس اس سلکتورهای نسبتاً زیادی دارد اما واقعاً همه آن‌ها مکرر استفاده نمی‌شوند و تعدادی مورد استفاده‌های خاص دارند از این تعداد بعضی‌ها از روی اسم مشخص می‌شود که چه کاری انجام می‌دهند و تعدادی هم علامت سوال باقی می‌مانند لازم نیست به همه سلکتور ها مسلط باشید هدف این پست توضیح و تشریح کاربردی‌ترین و پراستفاده‌ترین سلکتورها به طور کامل و یک بار برای همیشه است .در پایین یک شِما کلی از سلکتورهای پرکاربرد و مهم آورده‌ام اما قبل از اینکه به سراغشون بریم لازم دونستم بگم اشاره‌ای به سلکتور کلاس و آیدی ( ' . ' , ' # ' ) نکردم چون فرض بر این است که اگر کسی از این دو مطلع نباشه بهتره بجای ادامه این مطلب، آموزش ابتدایی css رو شروع کنه.draw.io ساخته شده با ۱ . سلکتور فرزندان: برای استفاده از این سلکتور نیازی به استفاده از کاراکتر خاصی نیست در واقع همان فاصله (space) بین المنت‌ها است و تمامی فرزندان المنت موردنظر رو انتخاب می‌کند .مثلا فرض کنید داریم : ساختار HTML مثال ساختار CSS مثالسوال: استایل بر روی کدام پاراگراف ها اعمال میشود؟‌جواب: همهوقتی از سلکتور فرزندان استفاده می‌کنید تو در تویی المنت ها اهمیتی ندارد فقط کافیه فرزند Wrapper اصلی باشند.یعنی حتی در حالت زیر هم استایل‌ها بر روی پاراگراف اعمال خواهد شد تا زمانی که پاراگراف ها فرزند Post هستند.ساختار HTML با تو در تویی عمیق المنت ها۲. سلکتور فرزند مستقیم (<)‌: فرزند مستقیم المنت مورد نظر رو انتخاب می‌کند.یعنی در واقع المنت‌هایی که مستقیما فرزند المنت پدر ذکر شده هستند انتخاب می‌شوند نه المنت‌هایی که درون المنت دوم یا سومی قرار گرفته است .مثال قبل رو با سلکتور فرزند مستقیم بازنویسی می‌کنیم‌: ساختار HTML با تو در تویی فرزندانساختار CSS مثالسوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌جواب: پاراگراف‌های خط ۲ و ۲۲ ( اولین پاراگراف بعد از تگ section و آخرین پاراگراف قبل از بسته شدن تگ section )۳. سلکتورهای ( خویشاوند ) :‌ ۳ ـ ۱ :‌ General Sibling Selector : (‌ ~ ) : با استفاده از این سلکتور تمامی المنت‌هایی که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید: ساختار HTML مثال ~ساختار CSS مثال ~سوال: استایل بر روی کدام پاراگراف‌ها اعمال می‌شود؟‌جواب: پاراگراف‌های ۲۲ و ۲۳شروطی که پاراگراف‌هایی که انتخاب می‌شوند باید داشته باشند: بعد از المنت H1 آمده باشندالمنت پدر اونها با H1 یکی باشهبه دلیل نقض موارد بالا استایل بر روی پاراگراف های خط ۱۲ , ۱۴ ,۱۶ , ۲۰ و ۲۵ با استفاده از این سلکتور تمامی المنت‌های که از جنس سمت راست "~" هستند و بعد از المنت از جنس سمت چپ "~" اومدن و به شرطی که پدر هردو المنت‌ها یکی باشد انتخاب می‌شوند. برای درک بهتر مثال زیر رو ببینید: اجرا نمی‌شود.برسی جداگانه موارد نقض:خط های ۱۲-۱۴-۱۶ : قبل از H1 اومدن خط ۲۰-۲۵ : پاراگراف‌ها بعد از H1 اومدن اما پدر پاراگراف‌ها با H1 یکی نیست در خط ۲۰ پدر پاراگراف یک div است و خط ۲۵ پاراگراف بیرون از section که پدر H1 هست قرار دارد.۳ ـ ۲ : Adjacent Sibling Selector (+): با استفاده از این سلکتور تنها اولین المنت از جنس سمت راست "+" که مستقیما بعد از المنت از جنس سمت چپ "+" اومده باشه انتخاب میشه با این تفاسیر اگه مثال قبل رو در نظر بگیریم هیچ پاراگرافی انتخاب نمی‌شود اما اگه بعد از H1 مستقیما پاراگراف هایی داشته باشیم هر تعدادی هم که باشند مهم نیست تنها اولین پاراگراف انتخاب می‌شود: Adjacent Sibling SelectorAdjacent Sibling Selectorسوال: استایل بر روی کدام پاراگراف(ها) اعمال می‌شود؟‌جواب: تنها پاراگراف بعد از H1 ۴. سلکتور های خصیصه (Attribute Present Selector):تگ های HTML دارای attribute های مختلف و زیادی هستند می‌توان در css از این attr ها استفاده کرد. مثلا:ساختار HTML مثال attribute selectorsساختار CSS مثال attribute selectorsدر مثال بالا از attr های href,type,id استفاده شده اما اکثر attr ها قابل استفاده است مانند attr های form,input , .... در مثال بالا شاید کاراکترهای $,^,* کمی گیج کننده باشد اما فقط تا چند ثانیه دیگه d:' '=^ : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شروع شود با محتوای درون ' '' '=* : به معنی این است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده شامل محتوای درون ' ' باشد' '=$ : به این معنی است که خصیصه‌ای که برای المنت استفاده شده انتخاب شده به محتوای درون ' ' خاتمه یابدبرای درک بهتر دوباره به مثال رجوع می‌کنیم: در آیتم اول تنها مساوی استفاده شده با محتوای https://google.com این سلکتور تگ های a که دقیقا شامل href گوگل است انتخاب می‌کند.در آیتم دوم تگ های a که href شان با https://hub شروع میشود انتخاب می‌شوند.در آیتم سوم و چهارم تگ های a که href شان با io,org خاتمه میبابد انتخاب میشوند .در آیتم پنجم تگ های a که href شان شامل کلمه redux است انتخاب میشوند .در آیتم ششم لیست های ol که تایپشان yellow است انتخاب میشوند . در آیتم هفتم span درون div با آیدی unique_div انتخاب میشود .۵ : سلکتور های شبه کلاس ( Pseudo-classes ) : شبه کلاس ها زمانی استفاده میشوند که نیاز به دسترسی به یک المنت در موقعیت یا حالتی خاص از آن را داشته باشیم که ۸ مورد از متداول ترین آنها را در زیر توضیح دادم : ۵ ـ ۱ : سلکتور های شبه کلاس مربوط به لینک ها : ( Link Pseudo-classes ) :a:link {...} ~> لینک ها در حالت عادی و دیده نشده a:visited {...} ~> لینک ها در حالت دیده شده a:visited {...} ~> لینک ها در حالت دیده شده۵ ـ ۲ : سلکتور های شبه کلاس مربوط به رفتار کاربر : ( User Action Pseudo-classes ) :a:hover {...} ~> المنتی که در حال حاظر نشانگر بر رویش قرار داره a:active‌ {...} ~> لینک فعال در حال حاظر a:focus {...} ~> المنتی که تاچ شده۵ ـ ۳ : سلکتور های شبه کلاس مربوط به وضعیت رابط کاربری : ( User Interface State Pseudo-classes ) : input:enabled {...} ~> input های فعالinput:disabled {...} ~> input های غیرفعالinput:checked {...} ~> چک باکس های تیک خوردهinput:indeterminate {...} ~> وقتی که بر روی سلکت باکس یا رادیو باکسی هنوز تغییری اعمال نشده۵ ـ ۴ : سلکتور های شبه کلاس مربوط به ساختار و مکان : ( Structural & Position Pseudo-classes ) : div:first-child {...} ~> اولین فرزند رو انتخاب میکند div:last-child {...} ~> آخرین فرزند رو انتخاب میکند div:first-of-type {...} ~> اولین فرزند یک پدر از جنس المنت مورد نظر div:last-of-type {...} ~> آخرین فرزند یک پدر از جنس المنت مورد نظر div div:only-child {...} ~> درصورتی فرزند انتخاب میشود که تک فرزند المنت پدر باشدشاید درک مورد only-child کم سخت باشه برای همین به مثال زیر دقت کنید :ساختار HTML مثال only-childساختار CSS مثال only-childتنها اسپنی انتخاب میشود که به تنهایی فرزند تگ div است۵ ـ ۵ : سلکتور های شبه کلاس مربوط به اعداد و عبارات : ( Numbers & Expressions Pseudo-classes ) :۱ . elm:nth-child(n) HTML ۲ . elm:nth-child(an) ۳ . elm:nth-child(n+b) ۴ . elm:nth-child(an+b) ۵ . elm:nth-child(an-b)۵ ـ ۵ ـ ۱ : مستقیما فرزند n ام انتخاب میشود۵ ـ ۵ ـ ۲ : فرزند های مضرب an انتخاب میشوند۵ ـ ۵ ـ ۳ : در اینجا یکم داستان فرق میکنه در اینجا با توجه به مقدار b از خود b به بعد فرزندان انتخاب میشوند به عنوان مثال :li:nth-child(n + 4) ~> لیست آیتم های ۴ به بعد انتخاب میشوند۵ ـ ۵ ـ ۴ : در اینجا N از صفر شروع شده و بعد از ضرب در a با مقدار b جمع شده و فرزندان منتخب محاسبه میشوند به عنوان مثال :li:nth-child(4n+7) : (4×0)+7, (4×1)+7, (4×2)+7 = فرزندان ۷ و ۱۱ و ۱۵ انتخاب میشوند ۵ ـ ۵ ـ ۵: در اینجا نیز N از صفر شروع شده و بعد از ضرب در a مقدار b از آن کم شده و فرزندان منتخب محسابه میشوند به عنوان مثال :li:nth-child(6n-4) : (6×0)-4, (6×1)-4, (6×2)-4 = فرزندان ۲ و ۸ و ۱۴ انتخاب میشوند۵ ـ ۶ : سلکتور شبه کلاس تهی : ( Empty Pseudo-class ) :المنت هایی انتخاب میشوند که درون آنها یا خالی باشه یا فقط کامنت درونشون باشه فقط نکته قابل توجه این است که space یا tab تهی محسوب نمیشونهد از آن جایی که از جنس استرینگ هستند به عنوان مثال : #post span:empty {...}

~> این انتخاب میشه ~> این انتخاب نمیشه فاصله ~> این انتخاب میشه

۵ ـ ۷ : سلکتور شبه کلاس نفی‌ : ( Negation Pseudo-class ) :این سلکتور فیلتر نفی میکنه و المنت هایی که درون ( ()not: ) ذکر شدن رو انتخاب نمیکنهنکته جالب درباره این سلکتور این است که قابل ترکیب با سلکتور های قبلی نیز است به مثال های زیر توجه کنید :li:not(.li-elements) {...} ~> لیست آیتم هایی که فاقد کلاس ذکر شده اند ul li:not(:nth-child(2n)) {...} ~> لیست آیتم هایی که مضرب ۲ نیستند انتخاب میشوندساختار HTML مثال ترکیبی not , nth-child ساختار CSS مثال ترکیبی not , nth-child ۵ ـ ۸ : سلکتور های شبه المنت مربوط به متن : ( Textual Pseudo-elements ) :element::after {...} ~> با استفاده از این سلکتور یک شبه المنت به آخر المنت سلکت شده اضافه میشود که میتواند استایل و محتوا بگیرد معمولا برای اضافه کردن انیمیشن و آیکون و در حال تزیینات استفاده میشود element::before {...} ~> مانند افتر است با این تفاوت که شبیه المنت را به اول المنت انتخاب شده اضافه میکند element::first-letter {...} ~> اولین کاراکتر متن محور درون المنت مورد نظر انتخاب میشود استفاده از این مورد رو باید اکثرا در سایت های نشریات دیده باشید element::first-line {...} ~> اولین خط پاراگراف المنت مورد نظر رو انتخاب میکنه element::placeholder {...} ~> اگه المنت مورد نظر دارای پلیس هولدر باشه انتخاب شده و میتوان بهش استایل بدید element::selection {...} ~> وقتی تکستی رو توی یک وب پیج انتخاب میکنید قسمت انتخاب شده یک رنگ و یک پس زمینه دارد اگه دقت کرده باشید بسته به یوزر ایجنت سیستم عامل و رنگ اکسنت یک حالت دیفالت داره مثلا فکر کنم دیفالت ویندوز آبی سفید است اوبونتو نارنجی سفید و مک او اس سفید و رنگ اکسنت انتخاب شده در تنظیمات است اما بعضی وبسایت ها فرق میکنه از موضوع اصلی دور نشیم نهایت قضیه این هست که این رنگ قابل تعویضه و این کار با استفاده از این سلکتور انجام پذیره به عنوان مثال اگه به خود ویرگول نگاه کنید :selection{ background:#0f94e9; color:#fff } استفاده کرده