Semantic HTML Elements

مریم حیدریان — Sat, 31 Dec 2022 18:09:43 +0330

تو این نوشته می‌خوام درباره یک مفهوم مهم یعنی Semantic HTML Elements که اغلب تو مصاحبه‌ها هم ازش سوال میشه، صحبت کنم ولی قبل از اینکه بریم سراغ اصل مطلب، بهتره یکم بریم تو دل زبان‌شناسی!تو زبان انگلیسی، کلمه Semantic رو درمورد چیزایی به کار میبرن که به معنا مربوط باشن، یعنی یجورایی سروکارشون با معنای اون چیز هست و میخوان اون رو توصیف کنن!سروکله این کلمه توی برنامه نویسی هم پیدا شده و اشاره به معنایِ یک قطعه کد داره، مثلا یک function توی جاوااسکریپت قراره چیکار کنه؟ یک کلاس CSS ای استایل مربوط به کدوم بخش از صفحه رو مشخص میکنه؟ یا اینکه نقش یک HTML element توی داکیومنت ما چیه؟!قطعا اسم یک function باید طوری انتخاب شه که توصیف‌کننده کار اون باشه مثلا:function createFruitList() { … }این تابع قراره یه لیستی از میوه‌ها رو بسازه.اسم یک کلاس CSS ای هم باید طوری انتخاب بشه که مشخص کنه این استایل‌ها، مربوط به کدوم المنت از صفحه هستن مثلا:.fruit-item { ... }این کلاس، استایل‌های مربوط به هر آیتم میوه رو مشخص میکنه.درمورد HTML elements هم همین روند صادقه و یک سری element توی HTML وجود دارن که بهشون میگن Semantic HTML Elements، المنت‌هایی با معنی!اینجا، لیست Semantic HTML Elements رو براتون آوردم:

//Defines independent, self-contained content

//Defines content aside from the page content

//Defines additional details that the user can view or hide

//Defines a caption for a

element

//Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

DOCTYPE declaration in HTML documents

مریم حیدریان — Thu, 09 Dec 2021 14:04:20 +0330

بیشترمون برای یادگیری برنامه نویسی فرانت‌اند، از آموزش HTML شروع می‌کنیم و اولین چیزی هم که یاد می‌گیریم اینه که خط اول یک فایل HTMLای باید بنویسیم: ، ولی چرا؟ برای جواب دادن به این سوال بهتره یکم برگردیم عقب...اصلا چیشد که سروکله DOCTYPE پیدا شد؟در سال هایی که HTML تازه درحال شکل‌گیری بود، هنوز استانداردهای مشخص و یکپارچه‌ای برای وب وجود نداشت و کمپانی‌های سازنده مرورگرها هرجوری که دلشون می‌خواست و بدون توجه به رقبا، فیچرهای جدیدی رو به مرورگرهاشون اضافه میکردن!نتیجه این بی‌توجهی سازندگان مرورگرها به رقبا و آشفتگی‌ها چی بود؟!این بود که دولوپرهای وب باید یک مرورگر رو انتخاب می‌کردن و وب‌سایت رو برحسب استانداردهای اون مرورگر پیاده سازی می‌کردن، درنتیجه ممکن بود وب‌سایت توسط بعضی از مرورگرها ساپورت نشه و روی اون‌ها درست کار نکنه!راه‌حل چی بود؟این بود که W3C درنهایت یه سری استاندارد تعریف کرد که همه سازندگان مرورگرها و دولوپرها از این استانداردها تبعیت کنن. اینجوری دیگه وب‌سایت‌ها توی همه مرورگرها ساپورت و render میشدن :)))ولی داستان به همین سادگی‌ها هم نبود...مشکل این راه‌حل چی بود؟این بود که تا به اون روز کلی وب‌سایت وجود داشت که با استانداردهای مختلف مرورگرها پیاده‌سازی شده بودن و سازگار با استانداردهای جدید W3C نبودن. پس با به وجوداومدن استانداردهای جدید، وب‌سایت‌‌های قدیمی به مشکل خوردن و نیاز به تغییرات گسترده دیده شد!برای حل این مشکل چه راهکاری پیشنهاد شد؟این که سازندگان مرورگرها بیان یه سری programming rendering mode برای مرورگرهاشون تعریف کنن.اینجوری دولوپرها با اضافه کردن یک خط کد به ابتدای کدهاشون به مرورگر میفهموندن که از کدوم render mode برای داکیومنتشون استفاده کنه، این یک خط کد همون DOCTYPE declaration هست!در اون زمان سه تا render mode برای مرورگرها تعریف شد:Full standards mode: renders pages according to the W3C web standardsQuirks mode: renders pages in a non standards compliant wayAlmost standards mode: is close to full standards mode, but features support for a small number of quirksبا گذشت زمان، همه مرورگرها این استانداردها رو کاملا پیاده‌سازی کردن و دولوپرها هم توی پیاده‌سازی وب‌سایت‌ها، کاملا اون‌ها رو رعایت کردن، بخاطرهمین دیگه اول هر HTML document میبینیم که نوشته شده و این tag به این معنی هست که این render mode موردنیاز برای این داکیومنت full standard render mode هست.یکم فنی تر!تعریف نوع و ورژن یک HTML document با استفاده از یک تگ در اولین خط اون داکیومنت صورت می‌گیره و این تعریف، به مرورگرها کمک می‌کنه که همشون یک داکیومنت رو به روش یکسانی parse کنن.مثلا صفحات‌وب که با HTML4.0.1 پیاده‌سازی شدن باید دارای DTD (document type definition) DOCTYPE باشند و از اون‌جایی که خود DTD هم سه نوع مختلف داره، DOCTYPE declaration این داکیومنت‌ها به این سه شکل تعریف میشن:ولی برای صفحات‌وب که با استفاده از HTML5 پیاده‌سازی شدن تنها کافیه از در ابتدای داکیومنت استفاده کنیم.درنهایت اینکه تعریف نوع داکیومنت case sensitive نیست و میشه ازش به هرکدوم از شکل‌های زیر استفاده کرد:منبع این نوشته رو هم براتون میذارم البته سعی کردم چیزی از قلم نیفته. امیدوارم براتون مفید بوده باشه ;))) https://www.freecodecamp.org/news/what-is-the-doctype-declaration-in-html/https://www.w3schools.com/tags/tag_doctype.asp

وب اسمبلی (WASM) چی هست و چیکارس؟!

مریم حیدریان — Sun, 10 Jan 2021 00:03:41 +0330

وب اسمبلی چی هست و چیکارس؟!وب اسمبلی یا به طور مختصر WASM، یک زبان شبیه به اسمبلی هست که در مرورگرهای مدرن پشتیبانی میشه (اینجا میتونین ببینین که تقریبا 92.54 درصد مرورگر ها WASM رو پشتیبانی میکنن). این زبان به فرمت باینری هست که درواقع یک زبان سطح پایین (زبانی نزدیک به زبان ماشین) محسوب میشه و درک اون برای مرورگر راحت تر هست. با استفاده از وب اسمبلی، افراد میتونن امکان انتخاب زبان برنامه نویسی رو داشته باشن؛ یعنی علاوه بر JavaScript (یا TypeScript تو پروژه هایی با مقیاس بزرگ تر)، میتونن از زبان های سطح بالایی مثل C# برای کد زدن استفاده کنن و کدشون توی مرورگر اجرا بشه و حتی در برخی مواقع، سرعت بهتری هم نصیبشون بشه!پس کسی قرار نیست با این زبان کد بزنه؛ بلکه کدهای نوشته شده به زبان های دیگه، به این زبان ترجمه (compile) میشن (شاید تو مقاله های مختلف هم به مفهوم compile target برخورد کنید).اما چی باعث میشه که با استفاده از WASM، سرعت بهتری رو تجربه کنیم؟!جواب های مختلفی برای این سوال وجود داره ولی یکی از ساده ترین دلایل این هست که فایل های JavaScript قبل از اینکه روی مرورگر اجرا بشن، باید از مرحله های مختلفی (parse, compile, optimize) عبور کنن ولی فایل های WASM این قابلیت رو دارن که حین دانلود شدن، پردازش هم بشن.در نهایت: یکی از مزیت های JavaScript‌ همیشه این بوده که روی همه مرورگرها قابلیت اجرا داره اما حالا WASM زبانی هست که هم روی همه مرورگرهای مدرن پشتیبانی میشه و هم عملکرد و سرعت خوبی داره و این، یعنی ورود زبان‌هایی مثل C#, Go, Rust به مرورگرها...! برای مثال Blazor یک فریموورک نسبتا نوپا هست که به ما این امکان رو میده که کد های نوشته شده به زبان C# رو با استفاده از WASM روی مرورگر اجرا کنیم!اگه میخواین کمی عمیق تر درمورد WASM بخونین، حتما یه سری به اینجا هم بزنید :)

نوشته های مریم حیدریان

Semantic HTML Elements

DOCTYPE declaration in HTML documents

وب اسمبلی (WASM) چی هست و چیکارس؟!