دلیل بی نظم بودن کد html


#1

برای به دست آوردن کد html یک سایت از چنین عبارتی استفاده می کنیم:

html = urlopen(https://devheroes.club) o
bs = BeautifulSoup(html.read(), ‘html5lib’) o
print(bs) o

اما چرا کد اکثر سایت ها در هم و برهمه و باید از یه parser مثل html5lib برای نظم دادن به کد استفاده کنیم؟ یعنی کد ها رو از عمد در هم و بر هم و بدون رعایت کردن indentation می نویسن؟


#2

بخش زیادی از کدی که توی صفحه میبینیم توسط نرم افزار و با توجه به دیتابیس ساخته میشه.
طبیعیه که indent نداشته باشه یا صحیح نباشه. چند خط کد توی back-end که از یک یا چند تا جدول دیتابیس یه سری دیتا میخونن و با توجه به اون یه سری ul/li و a و p میسازن بدون اینکه خودشون هم بدونن دارن چیکار میکنن!

یه مساله‌ی دیگه هم هست. معمولا یه سری فایلهای html داریم که به اونها helper میگیم. مثلا یه helper داریم برای بخش head وبسایت.
یه فایله که فقط head و meta-tagها نوشته شدن.
هر صفحه‌ای که میخواد رندر گرفته بشه، این head بالاش نوشته میشه. (بگذریم که یه سری تگهایی که داخل همین helperها هستن هم از دیتابیس میان)
بنابر این، صحیح نوشتن indent کار خیلی سختیه و از اونجایی که کسی نگاهش نمیکنه و برنامه نویس back-end وقت کافی برای این مسائل حاشیه‌ای نداره، وقتی برای اینکارها گذاشته نمیشه.

درضمن، بعضی وبسایتها پشت یه سرویس مثل cloudflare هستن یا توی سرورشون کانفیگهایی انجام شده برای minify کردن خروجی.
نتیجش این میشه که صفحات اون وبسایت حتی یک space اضافی هم ندارن، بنابر این یه ذره سبکتر به دست کاربر میرسن.

پس یه وقتایی از عمد اینطوریه و یه وقتایی واقعا برای برنامه نویس back-end مهم نیست اینجور چیزها.
برنامه نویسهای front-end معمولا دوست دارن کدهاشون تمیز باشه ولی متاصفانه (یا خوشبختانه) کدهاشون از زیر دست back-end developer و بعدا system administrator رد میشه و اونا اولویتهای دیگه‌ای دارن :wink:


وقتی ما یه وبسایتی رو با curl یا scrapy یا هر ابزار دیگه‌ای دریافت میکنیم، کاری با سینتکس نداریم. با دیتای فلان تگ p که با فلان id مشخص شده کار داریم.
پس فرقی برامون نداره.


پ.ن:

مثلا توی همین وبسایت یه بخش از کد اینطوریه:

      <meta property="og:site_name" content="Dev Heroes" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://devheroes.club/uploads/default/original/1X/628133f9934e1f20947e2ea4b77b83b8c779cd80.png" />
<meta property="og:image" content="https://devheroes.club/uploads/default/original/1X/6a685c62131f4d83394fd159f08d8af6c53b61f7.png" />
<meta property="og:url" content="https://devheroes.club/" />
<meta name="twitter:url" content="https://devheroes.club/" />
<meta property="og:title" content="Dev Heroes" />
<meta name="twitter:title" content="Dev Heroes" />
<meta property="og:description" content="اجتماع برنامه نویسان فارسی زبان" />
<meta name="twitter:description" content="اجتماع برنامه نویسان فارسی زبان" />

مشخصا این چند خط توی یه فایل بودن یا توسط یه function تولید میشن و زمانی که ما صداش زدیم، ۶تا space توی indent جلو رفته بودیم ولی اون فایل (یا فانکشن) اول خطها چیزی برای indent نذاشته بود.

خطهایی هست که الکی یه اینتر (\n) خورده و با خط بالایی یا پایینی فاصله داره، این به خاطر اینه که این خط ها از فایلها یا فانکشنهای متفاوتی اومدن که کنار همدیگه نبودن و برنامه نویس ندیده که اصلاحشون کنه. (یا حال نداشته)

به هر حال چون اشکالی به وجود نمیاره و هدف کار اینه که browserها دیتا رو صحیح دریافت کنن، پس اهمیتی بهشون داده نمیشه.


از اونجایی که با پایتون کار میکنید، اگر علاقه دارید، یه نگاهی به frameworkهای تحت وب flask و django بندازید. (من flask رو بیشتر دوست دارم)
اینطوری بیشتر با سیستم template engine ها آشنا میشید. اینکه چطوری ساخته میشن و دیتایی که از دیتابیس اومده بین تگ‌ها قرار میگیره و چطوری با استفاده از یه list، میشه تگ‌های ul/li درست کرد.
همه‌ی اینها بدون نوشتن یک خط کد پایتون و فقط با استفاده از ابزارهایی که jinja2 در اختیارمون قرار میده :slight_smile:


#3

خیلی خوب توضیح دادی، ممنونم. Django و template ها رو کار کردم و تا حد کمی میشناسم. منتها چون طراحی وبسایت خیلی چیزای دیگه به جز پایتون و جانگو رو شامل میشد و از طرفی هم فرصت کار کردن رو پروژۀ واقعی نداشتم، ترجیح دادم برم سراغ web scraping. میدونستم بعضی قسمتهای صفحه با کد پایتون برای مثال و با خوندن اطلاعات از دیتابیس تولید میشه، ولی تصورم این بود که این کد مرتب باشه…