نوشته های Shadi Shirinbeik

کدهای نشانه‌گذاری schema.org و نقش آن در سئو

Shadi Shirinbeik — Sun, 19 Jul 2020 22:55:23 +0430

نشانه‌گذاری اسکیما چیست؟ (schema.org)اسکیما مجموعه‌ای از کدهای دسته‌بندی شده، منظم و خلاصه‌ای می‌باشد که ساختار وب‌سایت ما را به موتورهای جستجوگر مثل گوگل، یاهو و ... معرفی می‌کند و باعث می‌شود تا موتورهای جستجوگر بتوانند درک بهتری از محتوای وب‌سایت ما داشته باشند. به طور مثال با استفاده از اسکیما می‌توانیم مشخص کنیم که عددی که در یک قسمت از محتوای وب‌سایت ما قرار گرفته در حقیقت شماره تماس شرکت است و عدد دیگری که در همان صفحه وجود دارد مربوط می‌شود به قیمت کالا. با همین روال می‌توانیم قسمت مقالات، ویدیوها و... را به درستی معرفی کنیم.بنابراین در schema markup ما محتوای صفحه را به گونه‌ای نشانه‌گذاری می‌کنیم تا برای موتورهای جستجوگر گوگل قابل فهم باشد.چرا باید از Schema استفاده کنیم؟استفاده از کدهای schema markup به گوگل کمک می‌کند تا مفهوم محتوای صفحه وب‌سایت ما را به صورت معنایی و کامل متوجه شود. (semanctic seo) همچنین باعث می‌شود در نتایج جستجو به صورت متمایز از رقبایمان نمایش داده شویم. (پرستاره‌تر، تصاویر بیشتر، بالاتر از بقیه وب‍سایت‌های مشابه و ...)در واقع وقتی محتوای صفحه را با استفاده از schema markup برای گوگل نشانه دار می‌کنیم، گوگل به راحتی متوجه می‌شود که کلیت این صفحه مربوط به چیست (صفحه محصول، صفحه مقاله و...) و هر قسمت صفحه درباره چه موضوع خاصی صحبت می‌کند. وقتی گوگل متوجه معنای صفحه ما شود قطعا درک بهتری از محتوای صفحه ما پیدا می‌کند و در رتبه سایت ما تاثیر گذار است. مثال کاربردی این مطلب در rich snippet و گراف دانش گوگل کاملا نمایان است.گراف دانش گوگل: برای درک بهتر این قسمت کافیست تا به طور مثال عبارت Thomas Jefferson را در گوگل جستجو کنید. پس از جستجو با صفحه نتایج یا همان SERP مواجه می‌شوید که شامل کاردی شبیه به تصویر زیر است.گراف دانش گوگلهمانطور که در تصویر بالا مشاهده می‌کنید، اطلاعات زیادی توسط این گراف در صفحه نتایج گوگل به کاربر داده می‌شود. اطلاعاتی از قبیل: تصاویر مرتبط، عنوان، توضیحات، تاریخ تولد، تاریخ وفات، جوایز دریافتی و... این اطلاعات توسط کدهای نشانه‌گذاری اسکیما در متن وب‌سایت‌ مشخص شده و حالا موتور جستجوگر گوگل به راحتی آن را متمایز از بقیه مطالب تشخیص می‌دهد.ریچ اسنیپت ها اطلاعاتی در مورد سایت و صفحات آن هستند که مانند گراف دانش در نتایج جستجوی گوگل نشان داده می‌شوند. به تصویر زیر دقت کنید:Rich snippetریچ اسنیپت امتیازدهی رایج‌ترین نوع از ریچ‌ها هستند. این امتیازها به کاربر کمک می‌کند تا از میان سایت‌های موجود، بهترین گزینه را انتخاب کند. البته این امتیاز میانگین امتیازی است که کاربران در صفحات مختلف به سایت‌ها می‌دهند.تفاوت schema با تگ‌های معنایی در htmlدر html معمولا از تگ‌های متا مثل تگ عنوان، کلمات کلیدی، توضیحات و... برای معرفی محتوای صفحه به موتورهای جستجو استفاده می‌شود. اما استفاده از این تگ‌ها به تنهایی نمی‌تواند محتوای وب‌سایت ما را به درستی و با جزئیات لازم به موتورهای جستجو معرفی کند و باز هم کافی نیست. به خصوص در مواردی که از کلماتی با معانی چندگانه در حیت جستجو استفاده می‌کنیم.در این شرایط استفاده از انواع محتوای تعریف شده در Schema.org و پیاده‌سازی آن با استفاده از ابزارهای مختلفی که در درسترس است می‌تواند تاثیر بسیاری در بهبود سئو وب‌سایت شما داشته باشد.انواع Schema markupنشانه‌گذاری در سایت می‌تواند با استفاده یکی از این سه نوع کد انجام شود:مورد اول - JsonLd: این لغت مخفف javascript object notation for linked data می‌باشد و به معنی نشانه‌گذاری داده‌های مرتبط به هم با جاوااسکریپت است. با توجه به تحقیقات و تجربه بنده، این روش جزو راحت‌ترین و بهترین روش نسبت به دو روش بعد می‌باشد. در تصویر زیر یک نمونه از کد اسکیما که به صورت json-ld نوشته شده است را مشاهده می‌کنید.json-ldقطعه کدی که در تصویر مشاهده می‌کنید یک نمونه از داده‌های مربوط به scehma markup می‌باشد. همونطور که مشاهده می‌کنید تمامی اطلاعات مربوط به اطلاعات یک کالا در وب سایت آمازون از جمله نام، پول رایج، تخفیف و ... در این قسمت درج شده است. با درک این قطعه کد تفاوت اساسی اسکیما با تگ‌های متا در html و یا روش‌های مشابه کاملا برای شما نمایان می‌شود.مورد دوم - microdata: این روش به میکروفرمت معروف است و تمام نشانه‌گذاری‌های اسکیما را روی html انجام می‌دهد. به این صورت که جزئیات تمامی آیتم‌هایی که می‌خواهیم محتوای آن‌ها را مشخص کنیم به عنوان itemprop به تگ‌های html تزریق می‌شود. در حقیقت درین روش کدها به صورت درون خطی نوشته می‌شوند. به تصویر زیر دقت کنید:microdataمورد سوم - RDFA: مخفف resource description framework in attribute و به معنی چارچوب شرح منابع در ویژگی‌ها می‌باشد. Rdfa بیشتر شبیه به یک افزونه برای زبان html5 هست. یعنی به کاربران اجازه می‌دهد تا کدهای html را چارچوب بندی کنند و معنای هرقسمت را با استفاده از اسکیما به گوگل معرفی کنند. این روش نیز از لحاظ پیاده‌سازی شباهت بسیاری به روش قبل دارد.ابزار آنلاین تست schema markupاگر نگاه مختصری به وب‌سایت اسکیما بیندازید متوجه می‌شوید که تعداد بسیار زیادی از انواع اسکیما برای انواع مختلف محتوا تعریف شده است. همانطور که استفاده از schema markup می‌تواند تاثیر بسازایی در بهبود سئو وب‌سایت ما داشته باشد، استفاده نادرست از آن هم به همان اندازه می‌تواند باعث سقوط ما شود. پس بهتر است بعد از پیاده‌سازی اسکیمای مورد نظر، آن را در ابزار تست اسکیما که گوگل معرفی کرده بررسی کنیم تا از عدم وجود خطا در ساختار کد مطمئن شویم. برای این منظور کافی است تا عبارت google structured data testing tool را در گوگل جستجو کنید و آدرس url وب‌سایت خود را در قسمت fetch url وارد کنید. سپس دکمه run test را کلیک کنید تا به صورت خودکار schema markup مربوط به وب‌سایت شما بررسی شود. در نهایت گزارشی مبنی بر وجود خطا یا warning و یا عدم وجود آن به شما ارائه می‌شود.google structured data testing toolروش‌های پیاده‌سازی schemaبرای پیاده‌سازی اسکیما می‌توانیم از سه روش برنامه‌نویسی، استفاده از ابزار آنلاین و استفاده از افزونه‌های وردپرس استفاده کنیم. اگر می‌خواهید از طریق کدنویسی اطلاعات مربوط به اسکیما را بر روی وب‌سایت خود ست کنید بهتر است از روش json-ld استفاده کنید.وب‌سایت‌های زیر نیز روشی با عنوان ابزار آنلاین، ساده و سریع برای نوشتن schema markup هستند.· https://technicalseo.com/· https://www.rankranger.com/اسکیما و وردپرسکاربران وردپرس به راحتی می‌توانند با نصب افزونه‌های رایگان، کار نشانه‌گذاری اسکیما را انجام دهند. افزونه Yoast یکی از پراستفاده‌ترین ابزار در وردپرس می‌باشد که یکی از کارهای آن ساخت کدهای اسکیما به صورت اتوماتیک می‌باشد. به همین ترتیب Schema pro ،all in one schema ،wpsso schema json-ld markup و... افزونه‌های مطرح درین باب هستند.نتیجه‌گیریدرین مقاله با مفهوم اسکیما و انواع آن آشنا شدید. همینطور ابزار مورد استفاده برای تولید کدهای نشانه‌گذاری اسکیما را شناختید. حالا وقت آن است تا کمی دست به کد شوید و مطالب گفته شده را پیاده‌سازی کنید. امیدواریم این مقاله برای شما مفید باشد.

Hoisting funstions vs hoisting classes

Shadi Shirinbeik — Fri, 12 Jun 2020 22:41:37 +0430

احتمالا تا به حال توی برنامه به یه سری خطاها برخورد کردین که بعد از یکمی سرچ متوجه شدین به خاطر چیزی به نام "Hoisting" این خطا رخ داده. یا اگه (به عنوان یک برنامه‌نویس)، تجربه مصاحبه برای استخدام رو داشته باشید ممکنه ازتون پرسیده باشن که hoisting چی هست؟ توی این مقاله سعی می‌کنم خیلی ساده و مختصر این مفهوم رو توضیح بدم. 1. Hoisting Functionsدر جاوااسکریپت توابع رو می‌تونیم به دوصورت زیر تعریف کنیم.1.1. Function declaration1.2. Function expressionبرای پیاده‌سازی مورد اول کافیه که از کلمه کلیدی function قبل از اسم تابع استفاده کنیم. به اینصورت://function declarationFunction example() {}اما اگه یک متغیر تعریف کنیم (یا constant) و بدنه تابع رو درون این متغیر بریزیم از روش دوم استفاده کردیم.//function expressionConst example = function() {};اگر برای پیاده‌سازی توابع از روش function declaration استفاده کنیم، می‌تونیم قبل از تعریف تابع اون رو فراخونی کنیم و خطایی هم پیش نخواهد اومد.example();..Function example() {}دلیل اینکه در این شرایط با خطایی مواجه نمی‌شیم این هست که جاوااسکریپت به طور خودکار در هنگامی که کد رو اجرا میکنه، تمامی توابعی که به صورت function declaration پیاده‌سازی شدن رو میاره میزاره اول فایل. (همینطور تمامی متغیرها رو) پس اینطور نیست که همیشه تمامی کدها به صورت خط به خط و به ترتیب اجرا شن.اما اگه توبع رو به صورت function expression پیاده‌سازی کرده باشیم این اتفاق نمیفته. پس نمی‌تونیم قبل از تعریف یه تابع به صورت expression، اون رو فراخونی کنیم. با این تعاریف، کد زیر باعث ایجاد خطا میشه:example();..Const example = function() {};پس ما نمی‌تونیم از example قبل از خطِ تعریف بدنه تابع استفاده کنیم.2. Hoisting classesبرای پیاده‌سازی کلاس هم دقیقا مثل توابع دوتا راه داریم.2.1. Class declaration//class declarationclass Example {}1.2. Class expression//class expressionConst Example = class {};برخلاف توابع، اگه یه کلاس رو به صورت class declaration پیاده‌سازی کنیم، هنگامی که کدها اجرا میشه تعریف کلاس به بالای فایل منتقل نمیشه و نمی‌تونیم قبل از پیاده‌سازی کلاس، یک شی از اون کلاس ایجاد کنیم. بنابراین کد زیر باعث تولید خطا میشه:Const ex = new Example(); //ReferenceError: Example in not defined..class Example {}راجع به class expression هم شرایط به همین صورت هست و باید حتما ساخت یک instance از کلاس رو بعد از پیاده‌سازی بدنه کلاس قرار بدیم تا با خطا مواجه نشیم.فکر می‌کنم تا اینجا به مقدار مناسبی با مفهوم hoisting آشنا شده باشید. اگه علاقه به مطالعه بیشتر درین زمینه دارید می‌تونید به لینک‌ زیر مراجعه کنید.https://developer.mozilla.org/en-US/docs/Glossary/Hoistingامیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید.بقیه مقالات من در ویرگول: https://virgool.io/@shadishirinbeik/%DB%8C%DA%A9%DB%8C-%D8%AF%DB%8C%DA%AF%D9%87-%D8%A7%D8%B2-%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D8%A7%D8%AA-%D9%85%D9%81%DB%8C%D8%AF-%DA%AF%DB%8C%D8%AA-git-stash-h5176fhfmosv https://virgool.io/@shadishirinbeik/%D8%A8%D8%A7-git-bisect-%D8%AA%D9%88%DB%8C-%DB%8C%D9%87-%DA%86%D8%B4%D9%85-%D8%A8%D9%87%D9%85-%D8%B2%D8%AF%D9%86-%D8%A8%D8%A7%DA%AF-%D8%B1%D9%88-%D9%BE%DB%8C%D8%AF%D8%A7-%DA%A9%D9%86%DB%8C%D8%AF-agcs3nkn3xqk https://virgool.io/@shadishirinbeik/%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%AA-%D8%B4%DA%AF%D9%81%D8%AA%D8%A7%D9%86%DA%AF%DB%8C%D8%B2-box-sizing-%D8%AF%D8%B1-css-%D8%B1%D9%88-%D8%A8%D8%B4%D9%86%D8%A7%D8%B3%DB%8C%D8%AF-uh8iyxstgix6 https://virgool.io/@shadishirinbeik/%D8%A7%DA%AF%D9%87-%D9%87%D9%86%D9%88%D8%B2-%D8%A8%D8%A7-%D8%AE%D8%B5%D9%88%D8%B5%DB%8C%D8%AA-position-%D8%AF%D8%B1-css-%D8%B9%D9%85%DB%8C%D9%82%D8%A7%D9%8B-%D8%A2%D8%B4%D9%86%D8%A7-%D9%86%DB%8C%D8%B3%D8%AA%DB%8C%D8%AF-%D8%A7%DB%8C%D9%86-%D9%85%D9%82%D8%A7%D9%84%D9%87-%D8%B1%D9%88-%D8%A8%D8%AE%D9%88%D9%86%DB%8C%D8%AF-zhyughp5f6al

یکی دیگه از دستورات مفید گیت --> Git stash

Shadi Shirinbeik — Mon, 11 May 2020 16:45:39 +0430

سلام دوستان.با نوشتن این مقاله قصد دارم شما رو با یه قسمت کوچیک دیگه از اقیانوس گیت آشنا کنم. مفهومی به نام git stash. پیش‌نیاز این مبحث آشنایی با گیت و مفاهیمی مثل add, commit و remote هست.در ابتدا یه توضیحی راجع به این میدم که اصلا چرا به git stash نیاز داریم؟ و بعد از اون سعی می‌کنم تمامی دستورات مهم و کاربردی این مفهوم رو توضیح بدم.1. چرا به git stash نیاز داریم؟یه مثال رایج از کاربرد git stash اینکه فرض کنید در حال توسعه یه قسمتی از پروژه هستید و به طور اورژانسی یه change داریم. یا نیازه که یه باگ خیلی فوری رو برطرف کنیم. توی این شرایط فرصت این رو که با خیال راحت فایل‌های مختلفمون رو stage و commit کنیم نداریم. یه مثال دیگه که برای خود من پیش اومده اینکه تایم کاریم در شرکت تموم شده اما هنوز یه قسمتی از کارم رو به صورت کامل توسعه ندادم و نمی‌خوام که اون رو نصفه و نیمه کامیت کنم. در این شرایط می‌تونیم از git stash استفاده کنیم. stash در لغت به معنی ذخیره کردن هست. در عمل هم دقیقا گیت میاد و هر آن چیزی که در local داریم و کامیت نشده رو ذخیره میکنه. حالا می‌تونیم با خیال راحت بریم سراغ تغییراتی که لازمه انجام بدیم. و بعد از اتمام کارمون دوباره مواردی که با استفاده از git stash ذخیره کرده بودیم رو Restore کنیم. بدون اینکه تاثیری روی هم داشته باشن.2. Git stashقبل ازینکه کار با stash رو شروع کنیم یه git status می‌گیرم تا ببینیم وضعیت چجوریه:git statusخب همونطور که می‌بینیم در فایل index.html یه سری تغییراتی داریم. حالا می‌خوام این تغییرات رو ذخیره کنم و برم سراغ یه کار دیگه. دستور زیر رو وارد می‌کنم و خروجی میشه شکل زیر:git stash git stashحالا اگه status بگیریم میبینیم که working directory ما خالی شده و تونستیم تغییرات رو بدون اینکه کامیت کنیم ذخیره کنیم. یه اسمی هم به طور پیش‌فرض بر روی stashمون گذاشته شده.3. Git stash saveبا این دستور می‌تونیم یه پیغام دلخواه برای stashمون انتخاب کنیم. وقتی که تعداد stashها زیاد باشن این مورد می‌تونه برای شناسایی سریع و راحت اون تغییری که مد نظرمون هست به کارمون بیاد.git stash save "this is a message for my stash"4. Git stash listبا این دستور خیلی راحت می‌تونیم یه لیستی از تموم stashهایی که داریم رو مشاهده کنیم. به خروجی زیر دقت کنین:git stash listخب تا اینجای کار داره بهمون میگه که ما دو تا stash داریم. هر کدوم ازین stashها یه ID و یه message دارن. (message اول پیغامی هست که خودم با دستور git stash save مشخص کردم و message دوم پیغامی هست که به صورت پیش فرض انتخاب شده.)4. Git stash save -uحتما متوجه شدید که git stash فقط فایل‌هایی رو ذخیره میکنه که track شده هستن. برای اینکه بتونیم untracked file ها رو هم ذخیره کنیم ازین دستور استفاده می‌کنیم.git stash save -uیاgit stash save --include-untrackedو اگه بخوایم ignored file ها رو هم ذخیره کنیم می‌تونیم از دستور زیر استفاده کنیم.git stash -aشکل زیر به خوبی مفاهیم این قسمت رو به تصویر کشده:git stash | git stash -u | git stash -a5. Git stash applyاگه بخوایم تغییراتی که ذخیره کردیم رو بازیابی کنیم می‌تونیم ازین دستور استفاده کنیم. git stash apply باعث میشه آخرین stash ما به working directory برگشت داده بشه. حالا می‌تونیم ادامه کارمون رو انجام بدیم.با استفاده از ID هر stash هم می‌تونیم یه stash به خصوص رو بازیابی کنیم. به قطعه کد زیر دقت کنین:git stash apply stash@{1}6. Git stash popاین دستور هم مشابه دستور قبل عمل میکنه با این تفاوت که وقتی آخرین stash رو برمیگردونه، اون رو از لیست stashها هم پاک میکنه.باز هم مثل دستور قبل، اگه بخوایم یه stash به خصوص رو pop کنیم می‌تونیم از ID اون stash استفاده کنیم.git stash pop stash@{1}7. Git stash dropحالا اگه بخوایم یه stash رو صرفا حذف کنیم (بدون نیاز به restore کردن اون)، می‌تونیم از این دستور استفاده کنیم. و اگه نیاز باشه یه stash مشخص حذف بشه هم با استفاده از ID اون.......git stash drop stash@{1}بهتره که در استفاده ازین دستور دقت کنیم چون مستقیما باعث حذف stashمون میشه و تغییرات رو Restore نمیکنه.8. Git stash clearاین دستور هم تمامی stashهامون رو به صورت یکجا پاک میکنه. (بدون اینکه اونها رو restore کنه)9. Git stash showاگه بخوایم تغییرات stash رو مشاهده کنیم می‌تونیم ازین دستور استفاده کنیم. این دستور تغییرات مربوط به آخرین stash رو بهمون میده.git stash showبه خروجی زیر دقت کنید:git stash showحالا اگه در ادامه همین دستور، ID یه stash مشخص رو قرار بدیم تغییرات مربوط به همون stash رو بهمون نشون میده.git stash show stash@{1}و با git stash -p هم لیست تغییرات تمامی stashها رو می‌تونیم داشته باشیم.git stash show -pخب دیگه تقریبا کار تموم شده. فقط یه دستور دیگه مونده.10. Git stash branch به عنوان آخرین دستور، می‌خوام یه دستور جالب و بهتون معرفی کنم. git stash branch میاد با آخرین stash ای که ما داریم یه برنچ میسازه. و بعد ازون stash رو حذف می‌کنه و به طور خودکار switch می‌کنه به برنچ جدیدی که ساخته شده.git stash branch "test"با دستور بالا یه برنچ جدید به نام "test" ساخته میشه و تغییراتی که در آخرین stash ذخیره شده به برنچ تست اضافه میشه و اون stash حذف میشه. روال کار رو در تصاویر زیر می‌تونین ببینین.همونطور که میبینید در حال حاضر (قبل از اعمال دستور git stash branch)، ما دو تا stash داریم و یه برنچ به نام master. و working directory مون هم clear هست.حالا بعد از اعمال دستورgit stash branch "test"خروجی رو به صورت زیر مشاهده می‌کنیم:git stash branch "test"خب... همچیز واضح و مشخصه. برنچ تست ساخته شده؛ تغییراتی که در آخرین stash بود (اگه یادتون باشه مربوط میشد به فایل index.html) حالا در برنچ تست قرار داره و گیت به‌طور خودکار به تست swtich کرده. و فایل index.html به حالت unstaged تبدیل شده. در آخرین خط هم مشاهده می‌کنید که stash مربوطه drop شده. (از لیست stashها حذف شده)و تموووم... مفهوم خیلی سخت و پیچیده‌ای نیست. فقط کافیه که دست به کار شین و یه بار خودتون این مراحل رو به صورت عملی انجام بدین. من درین مقاله سعی کردم دستورات مهم و کاربردی git stash رو به‌طور کامل براتون توضیح بدم. اگه علاقه به مطالعه بیشتر و دقیق‌تر درین زمینه دارید می‌تونید داکیومنت گیت و مطالعه کنید. https://git-scm.com/docs/git-stashامیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید.بقیه مقالات من در ویرگول: https://vrgl.ir/Qkzhq https://vrgl.ir/5GHd4 https://vrgl.ir/Xw8al References:https://git-scm.com/docs/git-stashhttps://www.javatpoint.com/git-stashhttps://www.atlassian.com/git/tutorials/saving-changes/git-stashhttps://medium.com/free-code-camp/useful-tricks-you-might-not-know-about-git-stash-e8a9490f0a1a

با Git bisect توی یه چشم بهم زدن باگ رو پیدا کنید!

Shadi Shirinbeik — Mon, 20 Apr 2020 18:58:44 +0430

با فرض اینکه ما می‌دونیم گیت چی هست و تجربه کار با گیت‌هاب و گیت‌لب رو داریم، می‌خوام که توی این مقاله شما رو با یکی از امکانات فوق‌العاده گیت به نام git bisect آشنا کنم.راجع به اینکه گیت چقدر عالیه، چقدر بزرگه و چقدر واجبه که همه دولوپرها حداقل قسمتی از کاربردهای گیت رو بشناسن و بتونن باهاش کار کنن صحبتی نمی‌کنم چون کاملا برای هممون واضحه. پس بدون اتلاف وقت، میرم سراغ اصل مطلب!دستور git bisect در حقیقت مخفف git binary search commit هست. ما وقتی ازین دستور استفاده می‌کنیم که در روند توسعه پروژه به باگ خوردیم و حالا می‌خوایم بدونیم که این باگ چه زمانی در کدوم کامیت پیدا شده و از طرفی کدوم ورژن از repositoryمون bug free هست. git bisect اینکارو با بررسی کامیت‌ها برامون انجام میده.خب حالا در عمل چه اتفاقاتی میفته و چجوری می‎تونیم با git bisect کار کنیم... دستور زیر اول از همه به گیت میگه که شروع کن به bisect کردن.git bisect startحالا باید یک سری اطلاعات به گیت بدیم تا بتونه در پیدا کردن باگ بهمون کمک کنه. اطلاعاتی که ما قراره به گیت بدیم دو قسمت بیشتر نیست. [خب چون خودمون اطلاعات زیادی نداریم! وگرنه دیگه نیازی به bisect نبود!:) ] اول از همه باید مشخص کنیم که در حال حاضر ما در این کامیتی که هستیم باگ داریم و یا به عبارتی اوضاع بده! پس با دستور زیر این رو به گیت میفهمونیم.git bisect badو بعد ازین، در مرحله بعد باید یکی از کامیت‌هایی که می‌دونیم در اون باگ نداشتیم رو به گیت معرفی کنیم و بگیم که در اون کامیت اوضاع خوب بوده. برای این کار به آی‌دی اون کامیتی که می‌دونیم بدون باگ بوده نیاز داریم، تا بتونیم ازین طریق به گیت معرفیش کنیم.پس یه git log می‌گیریم و آی‌دی کامیت مورد نظرمون رو کپی می‌کنیم. (در اینجا لزومی نداره که همه آی‌دی کپی بشه. یکمی از اولش هم کپی بشه برای شناسایی توسط گیت کافیه.) عکس زیر یه نمونه از git log هست. همونطور که میبینید جزئیات آخرین کامیت‌هاون رو نشون میده.git log و در ادامه با دستور زیر به راحتی این کامیت سالم رو به گیت معرفی می‌کنیم.git bisect good 3799573c07ae56555(#commit ID)همونطور که میبینید دستورات خیلی ساده و روون هستن.ازینجا ببعد کار گیت شروع میشه. به اینصورت که دقیقا یک کامیت مابین این دو کامیتی که ما معرفی کردیم رو در نظر می‌گیره و به ما پیشنهاد میده که این کامیت رو چک کنید ببینید باگ داره یا خیر. (یه پیغامی شبیه به عکس زیر مشاهده می‌کنید در این مرحله)چک کردن کامیت پیشنهادی گیت پس ما باید پروژه رو run و بررسی کنیم. فرض کنید پس از بررسی میبینیم که در این کامیت باگ وجود داشته. حالا باید مثل قبل با دستور زیر مشخص کنیم که کامیت پیشنهادی باگ داره. (بدون نیاز به آی‌دی کامیت)git bisect badبعد ازین دوباره گیت یه کامیت دیگه برای بررسی بهمون پیشنهاد میده. (پایه و اساس انتخاب‌ این کامیت‌ها توسط گیت، جستجوی باینری هست.) این کامیت رو هم بررسی می‌کنیم و (فرضا) میبینیم که در این کامیت باگی وجود نداره. دیگه حالا می‌دونید که باید دستور زیر رو بنویسیم.git bisect good تا اینجای کار به اینصورت پیش رفتیم:همونطور که میبینید زیر roughly 1 step خط کشیدم. این جمله یعنی اینکه گیت داره بهمون میگه هنوز 1قدم دیگه مونده تا باگ رو پیدا کنیم. پس حالا باید بازهم مثل مرحله قبل کامیت فعلی رو چک کنیم و به گیت بگیم که اوضاع چطوره. فرض می‌کنیم که در این کامیت هم باگی وجود نداره و دستور bisect good رو وارد کردیم. نتیجه میشه مثل عکس زیر:تمووووم :)باگ اینجاست. roughly 0 steps! یعنی دیگه تموم شده و نیازی به بررسی کامیت جدیدی نیست. باگ در همین کامیتی هست که آی‌دیش اون زیر نوشته شده. ("fix gallery")به همین سادگی! مراحل انجام کار همینی هست که در بالا گفتیم. در حقیقت هر دفعه باید پروژه رو اجرا بگیریم و بررسی کنیم و نتیجه رو به گیت اطلاع بدیم. و در نهایت گیت کامیتی رو که باگ در اون پیدا شده به ما معرفی خواهد. نه چیزی کمتر، نه چیزی بیشتر! برای کسب اطلاعات بیشتر و دقیق‌تر می‌تونید داکیومنت git bisect رو مطالعه کنید.https://git-scm.com/docs/git-bisectامیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید.بقیه مقالات من در ویرگول: https://vrgl.ir/Xw8al https://vrgl.ir/5GHd4 References:https://medium.com/free-code-camp/how-did-that-bug-happen-git-bisect-to-the-rescue-4368105f8149https://medium.com/infraspeak/git-bisect-the-unsung-hero-for-hunting-down-bugs-a4dbe3ca4c75

خصوصیت شگفت‌انگیز Box-Sizing در CSS رو بشناسید!

Shadi Shirinbeik — Sun, 12 Apr 2020 22:36:24 +0430

سلام دوستان.ویژگی Box-Sizing یه مفهوم کاملا ساده، کاربردی و البته مهمیه. درکش شاید کمتر از 5دقیقه طول بکشه اما می‌تونه سرعت توسعه پروژمون رو افزایش بده و کلی جاها استفادمون میشه.این خصوصیت به ما اجازه میده تا نسبت به نحوه اعمال اندازه‌ها بر روی عناصرمون کنترل بهتری داشته باشیم. و یا به عبارت دیگه مشخص میکنه که مقادیر Padding و Border چجوری بر روی عنصرمون اعمال بشن.این Property دو تا Value داره:اول Content-Box (که مقدار پیش‌فرض هم هست)و دومی Border-Boxیه مورد سومی هم قبلا وجود داشت به نام Padding-Box که باید بگم در حال حاضر منسوخ شده.خب همونطور که می‌دونید هر عنصر به‌طور کلی از چهار قسمتِ Margin, Padding, Content و Border که در تصویر زیر میبینید تشکیل شده.در حالت پیش‌فرض وقتی ما یک مقدار Width و Height ای رو برای عنصرمون تعیین می‌کنیم این مقادیر به قسمت Content تعلق می‌گیره. حالا اگه بیایم یه مقدار Padding و Border هم به عنصرمون اضافه کنیم این مقادیر جدای از Content محاسبه میشن و در حقیقت به Content اضافه میشن. خب اینایی که گفتیم یعنی چی؟ بیاین با یه مثال پیش بریم...فرض کنید که ما یه div در صفحه داریم و مقادیر زیر رو براش Set کردیم:div { width: 200px; height: 100px; padding: 20px; border: 5px solid black; }در این مثال ما انتظار داریم که عرض عنصرمون 200 پیکسل و ارتفاع اون 100 پیکسل باشه. اما در حقیقت 20 پیکسل از اطراف به عنوان Padding به عنصر اضافه میشه و 5 پیکسل هم برای Border. در نهایت عرض عنصرمون 250 پیکسل (250 = 5+5+20+20+200 ) و ارتفاع اون 150 پیکسل ( 150 = 5+5+20+20+100 ) خواهد بود.این مثال در حقیقت توضیح حالت Content-Box هست. وقتی خصوصیت Box-Sizing مقدار Content-Box داشته باشه (مقدار پیش‌فرض)، Padding و Border به عرض و ارتفاع عنصر اضافه میشه و اون رو بزرگ میکنه. یعنی عنصر در اغلب موارد بزرگتر از اون چیزی که شما تعیین کردید دیده میشه. به تصویر زیر دقت کنید.Box-Sizing: Content-Box;در مقابل، مقدار Border-Box برای خصوصیت Box-Sizing باعث میشه که مقدار نسبت داده شده به Border و Padding هم جزوی از عرض و ارتفاع عنصر محاسبه بشه و با تغییر ابعاد، هر دفعه همچیز به طور خودکار محاسبه میشه و در نهایت نتیجه با مقدار Width و Height ای که شما مشخص کردید متفاوت نمیشه. به تصویر زیر دقت کنید.Box-Sizing: Border-Box;کد زیر یک نمونه‌ی پیاده‌سازی شده از دو مقدار Content-Box و Border-Box هست که خروجی اون رو هم در شکل زیرش می‌تونید مشاهده کنید. ( این قطعه کد از سایت MDN گرفته شده.)html

Content box

Border box

cssdiv { width: 160px; height: 80px; padding: 20px; border: 8px solid red; background: yellow; } .content-box { box-sizing: content-box; /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px Total height: 80px + (2 * 20px) + (2 * 8px) = 136px Content box width: 160px Content box height: 80px */ } .border-box { box-sizing: border-box; /* Total width: 160px Total height: 80px Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ }Try it yourself: https://codepen.io/shadi-shirinbeik/pen/LYVKrybدو خروجی متفاوت با توجه به ویژگی Box-Sizingحالا که با این ویژگی آشنا شدیم باید بگم بهتره که در همون ابتدای پروژه و قبل از استایل‌دهی به المنت‌هامون مقدار این خصوصیت رو ست کنیم. خب چجوری؟ خیلی سادست. کافیه کد زیر رو در فایل سی اس اس مون قرار بدیم.*, *::after, *::before { box-sizing: border-box; }پیشنهاد می‌کنم خودتون هم حتما دست به کد شین و به صورت عملی در ادیتور این کدهارو اجرا کنید تا تجربه بهتر و قوی‌تری در ذهنتون ثبت بشه.سازگاری مرورگرها با خصوصیت Box-Sizing:Browsers Compatibilityامیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید...References:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizinghttps://medium.com/swlh/make-your-life-easier-with-css-box-sizing-3b6b2578bccdhttps://www.w3schools.com/css/css3_box-sizing.asp

اگه هنوز با خصوصیت Position در CSS عمیقاً آشنا نیستید این مقاله رو بخونید!

Shadi Shirinbeik — Sun, 05 Apr 2020 21:42:51 +0430

سلام دوستان...دارم اولین پست ویرگولم رو می‌نویسم؛ خیلی انگیزه دارم و امیدوارم که براتون مفید باشه.خب همونطور که می‌دونید قصد دارم تا در این پست خصوصیت Position در CSS رو به طور کامل براتون توضیح بدم. و پیشنهاد می‌کنم بعد از خوندن این مقاله دست به کد شین و مثال‌هارو به صورت عملی اجرا کنید تا نتیجه براتون بیشتر قابل درک باشه.ما با استفاده از خصوصیت Position می‌تونیم مکان یک عنصر رو در صفحه مشخص کنیم، که خب بسته به مقداری که این خصوصیت میگیره می‌تونه حالت‌های مختلفی داشته باشه. به طور کلی خصوصیت Position پنج تا Value متفاوت می‌گیره که عبارتند از:StaticRelativeAbsoluteFixedStickyبعد ازینکه هرکدوم ازین مقادیر رو برای Propertyمون Set کردیم، می‌تونیم از خصوصیات Left, Right, Top و Bottom هم برای اعمال تنظیمات بیشتر استفاده کنیم.اولین مقدار ;Position: Staticبه طور پیش‌فرض خصوصیت Position تمامی عناصر در HTML مقدار Static داره. یعنی اگر Position رو برابر با Static قرار بدین اتفاق خاصی نمیفته و موقعیت عنصر همچنان در همون جریان یا Flow عادی صفحه قرار خواهد داشت. به این نکته هم توجه کنید که وقتی خصوصیت Position مقدار Static داشته باشه دیگه Set کردن مقادیر Top, Right, Left و Bottom تاثیری در تغییر موقعیت عنصر نخواهند داشت. index.html

One

Two

Three

Four

style.css.parent { border: 2px black dotted; display: inline-block; } .ourBox { display: inline-block; background: #cdcdcf; width: 100px; height: 100px; } #secondBox { position: static; /*default value*/ background: #254de3; color: white; }Try it yourself: https://codepen.io/shadi-shirinbeik/pen/ZEGdabpPosition: Static; Default for every element ever.دومین مقدار ;Position: Relativeاگه به خصوصیت position عنصری مقدار relative بدیم می‌تونیم این عنصر رو با استفاده از porpertyهای Top, Left, Right و Bottom جابجا کنیم. به این صورت که جایگاه این عنصر در Flow مثل گذشته حفظ میشه و عنصر دیگه‌ای نمی‌تونه جاشو پر کنه. اما نسبت به موقعیت فعلی خودش جابجا میشه. نکته مهمی که اینجا وجود داره اینکه این جابجایی تاثیری بر روی عناصر مجاور نخواهد داشت.style.css.parent { border: 2px black dotted; display: inline-block; } .ourBox { display: inline-block; background: #cdcdcf; width: 100px; height: 100px; } #secondBox { position: relative; top: 25px; left: 25px; background: #254de3; color: white; }Try it yourself: https://codepen.io/shadi-shirinbeik/pen/eYNweBvPosition: relative;سومین مقدار ;Position: Absoluteاین حالت نیز از یه لحاظی مشابه حالت قبلی هست. اونم اینکه می‌تونیم عنصر رو با استفاده از چهار خصوصیت Top, Left, right و Bottom جابجا کنیم. اما تفاوت اینجاست که این جابجایی نسبت به Parent عنصر اتفاق میفته و در حقیقت عنصر از Flow نرمالش خارج میشه و عنصر بعدی جای اون رو پر میکنه. بنابراین عنصری که دارای مقدار Absolute هست به Parent خودش نگاه میکنه و با توجه به Positionای که پدرش داره مکان فعلی خودش رو مشخص میکنه. اگر برای عنصر پدر Positionای Set نشده بود به عنصر پدربزرگش رجوع میکنه و همینطور به سمت بالا... (در اینجا Parent عنصر ما عنصر دایو با کلاس parent هست.)style.css.parent { position: relative; border: 2px black dotted; display: inline-block; } .ourBox { display: inline-block; background: #cdcdcf; width: 100px; height: 100px; } #secondBox { position: absolute; top: 25px; left: 25px; background: #254de3; color: white; }Try it: https://codepen.io/shadi-shirinbeik/pen/BaNgJoLPosition: absolute;چهارمین مقدار ;Position: Fixedحالا که راجع به Absolute می‌دونیم، درک Fixed برامون خیلی راحته. در این حالت هم عنصر از Flow خارج میشه ولی این بار بجای Parent، موقعیت مکانیش نسبت به Viewport مشخص میشه. لذا عنصر همیشه در یک مکان ثابت قرار داره و حتی اگه صفحه اسکرول بخوره، بازهم موقعیت مکانی عنصر تغییری نمی‌کنه.style.css.parent { margin-top: 40px; margin-left: 40px; border: 2px black dotted; display: inline-block; } .ourBox { display: inline-block; background: #cdcdcf; width: 100px; height: 100px; } #secondBox { position: fixed; top: 0px; left: 0px; background: #254de3; color: white; }Try it yourself: https://codepen.io/shadi-shirinbeik/pen/XWbLVdPPosition: Fixed;و مورد آخر ;Position: Stickyدر مورد Sticky اولین نکته اینکه باید حتما یکی از چهار خصوصیت Top, Right, Left و Bottom رو Set کنیم وگرنه اثری نخواهد داشت. حالا به عنوان مثال ما مقدار ;Top: 2px رو Set می‌کنیم. در این حالت تا زمانی که اسکرول باعث نشه فاصله عنصر از بالای صفحه برابر با 2پیکسل بشه رفتاری دقیقا مشابه حالت Relative از عنصر می‌بینیم. اما به محض اینکه فاصله اون از بالای صفحه برابر با 2px بشه عنصر ثابت می‌شه و با اسکرول به پایین یا بالا، موقعیت مکانی عنصر تغییری نمی‌کنه. (این مورد رو حتما توصیه می‌کنم در ادیتور اجرا کنید و نتیجه رو عملا مشاهده کنید.)index.html

Header of the page

/* Copy and Paste Lorem Ipsum text here, for any times you want*/

style.css.header{ background-color: green; color: white; font-size: 30px; text-align: center; border: 2px dotted black; padding: 25px; } .nav{ border: 2px dotted black; background-color: yellow; padding: 15px; font-size: 20px; text-align: center; position: sticky; top: 0; } .footer{ background-color: blue; color: white; font-size: 30px; text-align: center; border: 2px dotted black; padding: 25px; }Try it yourself: https://codepen.io/shadi-shirinbeik/pen/mdJZpvWخب... امیدوارم این مقاله براتون مفید بوده باشه. نظر، انتقاد یا پیشنهادی اگر دارین خوشحال میشم بشنوم تا باهم بیشتر یاد بگیریم. موفق باشید...References:https://medium.com/@leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6https://medium.com/@jacobgreenaway12/taming-the-css-beast-master-positioning-5882bad14458https://medium.com/@elad/css-position-sticky-how-it-really-works-54cd01dc2d46https://www.w3schools.com/css/css_positioning.asp