https://virgool.io/feed/@kasrahabibbeygi 5 ساله توی زمینه برنامه نویسی و طراحی سایت مشغول به کار و کسب تجربه هستم و به شدت به این کار یعنی برنامه نویسی علاقه مندم fa 2026-06-17 09:07:13 https://files.virgool.io/upload/users/1190021/avatar/haeKn0.jpeg?height=120&width=120 https://virgool.io/@kasrahabibbeygi https://virgool.io/@kasrahabibbeygi/%D9%87%D9%85%D9%87-%DA%86%DB%8C%D8%B2-%D8%AF%D8%A8%D8%A7%D8%B1%D9%87-xhr-ajax-axios-fetch-jdceq1ogqv1n توی این مقاله میخوایم نگاهی به XHR که مخفف شده XMLHttpRequest است و کتابخانه های مربوط به اون بندازیم .به ساده ترین زبان ممکن XHR یک شئ در JavaScript و در سطح مرورگر است که پلی بین کلاینت و سرور برای ما ایجاد میکنه .مفهوم XHR برای اولین بار در internet explorer 5 معرفی شد و تبدیل به یکی از فناوری های کلیدی در پشت انقلاب Asynchronos JavaScript and XML یا همان Ajax شد و الان تقریبا یک عنصر اساسی برای وب سایت های مدرن است .قبل از XHR ، صفحات وب برای ارسال در خواست و گرفتن جواب از سرور ها مجبور بودن از اول بارگزاری بشن به همین صورتی که همین الان خیلی از وب سایت ها به همین شکل کار میکنن ، ولی وقتی XHR اومد باعث شد این روند عوض بشه .بالاتر گفتم که XHR یک پل ارتباطی بین کلاینت یا همون مروگر ها و سرور ایجاد میکنه ، این پل ارتباطی باعث میشه که مروگر ها به سرور درخواست بدن و جواب رو بگیرن بدون اینکه نیازی باشه مجدد بارگزاری بشن .قدرت XHR فقط به این نیست که باعث ارتباط بین سرور و کلاینت بدون رفرش میشه ، میشه گفت علاوه بر این خیلی از چیز های دیگرو هم هندل میکنه مثل :مرورگر برقراری ارتباط ، گرفتن اطلاعات و خاتمه دادن ارتباط را مدیریت میکنه .مرورگر بهترین HTTP(S) را تعیین میکند . (HTTP/1.0 , 1.1 , 2)مرورگر کش کردن ، redirect و content-type negotiation را انجام میدهد .مروگر محدودیت های امینیتی ، احراز هویت و حریم خصوصی را اعمال میکند .و یک سری موارد دیگه .توضیح مختصری در رابطه با APIبه طور خلاصه ، API پلی بین دو اپلیکیشن است و اجازه میده که دو اپلیکیشن با یکدیگر صحبت کنند .برای مثال من یک سایت دارم که کاربر میتونه داخلش ثبت نام انجام بده و از طرفی (چه رو سرور خودم چه رو یه سرور دیگه) یک فایل API دارم (زبان برنامه نویسی API مهم نیست هر چیزی میتونه باشه ) که رجیستر کاربر رو انجام میده و اگر مورد تایید بود اون کاربر رو به دیتابیس اضافه میکنه ، وقتی کاربر اطلاعات خودش رو تکمیل میکنه و روی گزینه ثبت نام میزنه ، توسط XHR این اطلاعات به سمت فایل API فرستاده میشن و در اونجا پردازش میشن ، بعد از اینکه پردازش انجام شد ، API یک پیام به سمت سایت میفرسته ، برای مثال میگه ثبت نام انجام شد و XHR این پیام رو دریافت میکنه و تنها کاری که سایت لازمه انجام بده اینه که پیام رو به صورت دلخواه برای کاربر به نمایش بزاره و تمام .خیلی ساده میتونید توی عکس روش کار API رو ببینیدپس میشه گفت یکی از کاربرد های بسیار مهم XHR این هست که توانایی استفاده از API ها بدون اینکه سایت دوباره بارگزاری بشه رو به راحتی به ما میده .یکی از ویژگی های مهمی که با استفاده از XHR به دست میاریم درست کردن سایت های SPA یا Single Page Aplication است که تماما بر اساس API و درخواست های XHR درست میشه .اگر بخواهیم XHR را در مرورگر ایجاد کنیم و درخواستی به API ارسال کنیم باید از روش زیر استفاده کرد :let request =new XMLHttpRequest(); request.open('GET' , 'https://www.example.com/example.php'); request.responseType ='text'; request.=function() { console.log(request.response); }; request.send();کد بالا یک کد جاوا اسکریپت است که وقتی صفحه وب سایت load شد ، درخواست XHR را به سمت API با متد GET ارسال میکند و وقتی جواب را در سمت سرور گرفت آن را در کنسول به نمایش میگذارد .در صورتی که میخواستیم پارامتر خاصی رو به طرف API ارسال کنیم (مثل مثالی که بالا تر برای ثبت نام کاربر زدم ) به صورت زیر پارامتر خودمون رو داخل یک استرینگ قرار میدیم و داخل request.send قرار میدیم :Let data = &quotname=kasra&lastname=habibbeygi&quot request.send(data);یک نکته بسیار جالب در رابطه با فرستادن اطلاعات در XHR وجود داره ، به این ماجرا توجه کنید :برای نوشتن یک API لازم نیست زبان برنامه نویسی خاصی رو مد نظر قرار بدیم ، هر زبانی که بتونه با دیتابیس در ارتباط باشه رو میتونیم استفاده کنیم مثلا یک API رو میتونیم با زبان هایی مثل PHP , python , node.js , ruby , java , … بنویسیم .حالا ممکنه براتون سوال پیش بیاد که داده ای که من توسط XHR ارسال میکنم باید با چه فرمتی باشه که هر کدوم از این زبان ها بتونن ساپورت کنن و بفهمن ؟جواب سوال JSON هست .فرمت JSON یا JavaScript Object Notation ، یک قالب سبک وزن برای ذخیره و انتقال داده هست ، شما با استفاده از این فرمت میتونید هر چیزی رو به صورت یک متن ذخیره کنید و انتقال بدید این فرمت هم برای انسان و هم برای ماشین خوانایی داره و تمام زبان های برنامه نویسی و اسکریپت نویسی قابلیت خواندن JSON رو دارن .نمونه یک سری اطلاعات که به صورت JSON نوشته شده اندپس ما معمولا پارامتر هامون رو به صورت یک استرینگ و نوشته متنی ارسال میکنیم یا با فرمت JSON .ولی همونطور که میبینید یک مقدار نوشتن XHR سخته (البته این فقط یک تیکه کد ساده است ، اگر نیاز باشه XHR رابه صورت حرفه ای نوشت خیلی سخت و پیچیده میشه) ، به همین خاطر تعداد زیادی کتابخانه برای نوشتن درخواست XHR به وجود اومدن که میتونن کار مارو خیلی ساده کنن .کتابخانه های معروف برای درخواست XHRجازگزین XHR خالص : () fetchخوبی این متد این است که نیازی به اضافه کردن کتابخانه خاصی نیست ، درواقع میشه گفت که یک جایگزین مدرن برای XHR است و شما میتونید خیلی راحت در کد های جاوااسکریپت سمت کلاینت ازش استفاده کنید .کد زیر دقیقا جایگزین کد بالا در XHR است "fetch('https://www.example.com/example.php', { method: 'GET', headers: { 'Accept': 'application/json, text/plain, */*', 'Content-Type': 'application/json' }, body: JSON.stringify({name : kasra , lastname : habibbeygi}) }).then(res =>res.json()) .then(res =>console.log(res));متد ajaxمتد محبوب ajax در کتابخانه بسیار پر کاربردjquery معرفی شد ، اگر شما در پروژه خودتون از jquery استفاده میکنید حتما پیشنهاد میکنم به جای fetch یا XHR از ajax استفاده کنید به خاطر اینکه هم خیلی اسون هست و هم اینکه jquery اون متد رو داخل خودش داره و نیازی نیست چیز جدیدی اضافه کنید ، تیکه کد بالا رو اگر بخواهیم با ajax بنویسیم به شکل زیر در می اید :Let data = “name=kasra&lastname=habibbeygi”; $.get(&quothttps://www.example.com/example.php&quot, data , function(res){ Console.log(res); })اگر توجه کنید میبینید که چقدر ساده تر از Fetch و XHR هست .کتابخانه AXIOSاین کتابخانه یک کتابخانه بر پایه promis برای node.js و سمت کلاینت است .تفاوت اصلی axios با بقیه کتابخانه ها در این است که هم در سمت سرور کاربرد دارد و هم در سمت کلاینت و جالب تر اینجاست که در هر دو سمت از کد های کاملا مشابه استفاده میشود .Let data = “name=kasra&lastname=habibbeygi”; axios.get(&quothttps://www.example.com/example.php&quot , data).then(function(res){ Console.log(res); })همانطوری که میبینید axios هم مثل jquery خیلی ساده هست .کتابخانه SuperAgent :یک کتاب خانه شبیه به axios است که محبوبیت زیادی هم در مرورگر ها هم در node.js داره .نکته جالب در superagent این هست که این کتابخانه توابع و متد های زیادی برای استفاده کردن داره .همچنین یک سری پلاگین برای نصب کردن داره که شما میتونید از قابلیت های اونها استفاده کنید ، برای مثال یک شبیه ساز rest API برای ما درست میکنه یا پلاگین های متنوع دیگه که هر کدوم استفاده خاص خودشون رو دارن .superagent.get(&quothttps://example.com/example.php&quot) .query({ name: 'kasra’, lastname: 'habibbeygi' }) .end((res) => { console.log(res); });اشتراک منابع متقابل یا Cross-Origin Resourse Sharing (CORS)بالا تر ما در رابطه با API ها صحبت کردیم و میدونیم که این API ها میتونن روی سرور خودمون و توسط خودمون نوشته شده باشن و یا روی یک سرور دیگه و توسط دیگران نوشته شده باشن و ما میتونیم به راحتی ازشون استفاده کنیم .حالا مشکل اینجاست که اگر API توسط یه شخص دیگه و روی یه سرور دیگه باشه ما به راحتی و با یه درخواست ساده میتونیم بهش متصل بشیم ؟جواب این سوال نه هست !چرا نه ؟ به خاطر اینکه تعدادی سیاست و قوانین امنیتی داخل مرورگر ها و سرور ها وجود داره تا وب سایت هارو از حملات مختلف در امان نگه داره ، این قوانین و سیاست های امنیتی رو CORS یا اشتراک منابع متقابل نام گزاری کردن .حفاظ امنیتی CORS به دو دسته کلایت ساید و سرور ساید تقسیم میشه .سمت کلاینتداخل مرورگر ها یه حفاظ امنیتی داریم به نام Same-origin policy که یه سری قوانین داره ، این قانون ها میگن که مقصد درخواست ما باید با منبعی که در ان هستیم یکی باشد و زمانی این دو یکی هستند که : به یک دامنه یا زیر دامنه متصل باشند . به یک پروتکل متصل باشند (HTTP / HTTPS) به یک پورت وصل باشند .این قوانین به خوبی در عکس زیر مشخص هستندکتابخانه های بالا که معرفی کردیم همگی از قوانین CORS پیروی میکنند و موقعی که درخواست را به سمت سرور ارسال کردن یک هدر Origin هم به درخواست HTTP اضافه میکنند که مقدار این هدر برابر با منبعی که درخواست از ان ارسال شده ، سرور درخواست شما را دریافت میکند ، هدر origin را میخواند تا متوجه شود درخواست از کجا آمده .وقتی فایل API روی سرور خود سایت قرار داشته باشه میشه گفت CORS درخواستی رو بلاک نمیکنه و همه چیز اوکیه ولی وقتی از سایت بخوایم به یه API روی یه سرور دیگه درخواست بدیم CORS برامون محدودیت های بالا رو ایجاد میکنه و برای رفع این محدودیت ها باید به درخواست کننده مجوز درخواست داده بشه .سمت سرورسمت سرور و داخل API شما میتوانید از یک سری header استفاده کنید که این درخواست ها را مدیریت کنید .هدر های Access-Control این قابلیت را به شما میدهند .اگر شما این هدر را به API خود اضافه نکنید ، تمام درخواست های Cross-Origin بلوکه میشوند .تعداد هدر های Access-Control بسیار زیاد هستند ولی یکی از این هدر ها بسیار مهم است ، شما با این هدر مجوز دسترسی را صادر میکنید :اگر به جای آدرس دامنه از * استفاده کنید به تمام درخواست ها ، مجوز داده میشود .سخن پایانی به وجود آمدن XHR باعث تحول بزرگی در وب سایت ها شد و توانایی استفاده و درست کردن چیز های جدید مثل استفاده از API ، درست کردن PWA و SPA ، ماکروسرویس و ... رو به ما داد .پیشنهاد میکنم اگر شما هم برنامه نویس سایت هستید و هنوز به این ماجرا روی نیاوردید و ازش استفاده نمیکنید ، حتما نظرتون رو عوض کنید ، به خاطر اینکه دستتون رو توی زمینه های مختلفی باز میکنه و باعث میشه ساختار شما ، ساختار منظم تری باشه و خیلی چیز های دیگه ...منابع : اگر اطلاعات کامل تر و بیشتری در رابطه با XHR نیاز دارید حتما به سایت زیر یه سری بزنید : https://www.oreilly.com/library/view/high-performance-browser/9781449344757/ch15.html عکس های گیف : https://www.roxo.ir/cs-visualized-cors کسری حبیب بیگی کسری حبیب بیگی Sat, 09 Oct 2021 10:48:53 +0330 https://virgool.io/cheyab-blog/%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D9%87-%D9%86%D9%88%DB%8C%D8%B3%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-%D8%B1%D9%88-%D8%A7%D8%B2-%DA%A9%D8%AC%D8%A7-%D8%B4%D8%B1%D9%88%D8%B9-%DA%A9%D9%86%DB%8C%D9%85-aa8wgdvqtat1 یکی از بزرگترین دغدغه های کسانی که تازه میخوان وارد حوزه وبسایت بشن اینه که نمیدونن از کجا باید شروع کنن ، امروز میخوایم تو این مقاله با هم به بررسی این موضوع بپردازیم که نقطه شروع کجاست ؟قبل از اینکه بریم و شروع کنیم میخوام یک نکته به شدت مهم و حیاطی رو بگم بهتون ، میشه گفت این نکته راز موفقیت شما تو هر کاریه !اون نکته چیزی نیست جز علاقه .علاقه باعث میشه شما توی کارتون پیشرفت کنید ، براش بجنگید و تلاش کنید ، چند شب نخوابید ، کارتون بشه تفریحتون و تفریحتون بشه کارتون و ...ممکنه براتون سوال پیش بیاد که از کجا باید بفهمیم به چی علاقه داریم ، به زودی در رابطه با این موضوع یه مقاله مینویسم برای اون هایی که این سوال براشون پیش میاد .پس با این اوصاف نقطه شروع رو پیدا کردیم ، نقطه شروع علاقه هست ، اگر علاقه ندارید بهتون قول میدم برنامه نویسی برای شما سخت ترین و طاقت فرسا ترین کار دنیا میشه .اگر به برنامه نویسی علاقه دارید ، بریم ببینیم که بقیه مسیر چیه ؟طراح یا برنامه نویس ، مسئله این است !توی حوزه وب سایت ها ما دو تا دسته داریم : طراح های سایت و برنامه نویس های سایت که هر کدوم از این ها کاملا از هم جدا هستند ، البته منظورم از جدا بودن نوع کاری که انجام میدن هست وگرنه کاملا باید با هم در تعامل باشن .طراح سایت کیست؟به طور کلی ، شخصی که طرح گرافیکی و شمای کلی یک وب سایت را طراحی میکند طراح وب سایت است .اگر بخوایم یک مقداری دقیق تر توضیح بدیم ، طراح وب سایت به مفاهیم UI , UX , CX , WireFrame و ... ، ابزار هایی مانند photoshop , adobe XD, figma و ... تسلط کامل داره ، سعی میکنه با توجه به نوع وب سایت مشخصه هایی رو در طراحی وب سایت به کار ببره تا وب سایت رو جذاب و کاربر پسند بکنه و باعث بشه کاربر تجربه خوبی از کار با اون وب سایت داشته باشه .طراحی وب سایت به این صورت هست که طراح یک طرح از وب سایت با توجه به نیاز کارفرما و بازار در اپلیکیشن هایی که بالا گفتم طراحی میکنه و اون رو به برنامه نویس فرانت اند میده .قبل از اینکه بریم سراغ برنامه نویسی سایت یه نکته ای وجود داره که باید بگمتوی این قسمت ما دو نوع ادم داریم :یا به برنامه نویسی و کد نویسی علاقه دارنیا به برنامه نویسی و کد نویسی علاقه ندارناگر شما جزو افرادی هستید که به برنامه نویسی علاقه ندارید میتونید از قالب های اماده و پنل های مدیریت محتوا مثل wordpress , jomla و ... استفاده کنید که دیگه نیازی نداره زیاد کد نویسی کنید و خیلی راحت و توی کم ترین زمان سایتتون بالا میاد .ولی اگر به برنامه نویسی علاقه دارید بقیه مقاله رو حتما مطالعه کنید .برنامه نویسی سایتبرنامه نویسی سایت به طول کلی به دو دسته زیر تقسیم میشه :· برنامه نویس front-end· برنامه نویس back-endاول از همه به برنامه نویس front-end بپردازیمبرنامه نویس front-end کیست ؟به کسی که طرح گرافیکی طراح سایت را به یک وب سایت واقعی و کد تبدیل کند برنامه نویس front-end یا برنامه نویس سمت کاربر گفته میشه ، نکته اینجاست که وقتی برنامه نویسی Front-end تموم شد فقط ظاهر یا قالب سایت تکمیل شده و هیچ اطلاعاتی ثبت و خونده نمیشه .برای مثال یک وب سایت فروشگاهی مثل دیجی کالا رو تصور کنید ، فرض کنید ما داریم این وب سایت رو از اول درست میکنیم ، وقتی بخش Front-end وب سایت تموم میشه ، کسی نمیتون خرید خودش رو یا نظر خودش رو به ثبت برسونه یا کسی نمیتونه با پشتیبانی ارتباط برقرار کنه ، ادمین های سایت نمیتونن محصول به سایت اضافه کنن و هر چیز دیگه ای ، برای این کار ها نیاز هست که وب سایت ما با استفاده از یک زبان back-end به پایگاه داده وصل بشه .برنامه نویس back-end کیست ؟به کسی که قالب وب سایت رو با استفاده از یک زبان برنامه نویسی مثل PHP , Node.js , python و ... به پایگاه داده وصل میکنه برنامه نویس back-end یا برنامه نویس سمت سرور میگن .امیدوارم تا اینجای کار کلیت حوزه وب سایت ها رو متوجه شده باشید .حالا بریم یه مقداری عمیق تر بشیمبرای front-end کار شدن به چه چیز هایی احتیاج هست ؟برای اینکه front-end کار بشید به ترتیب باید به یادگیری موارد زیر بپردازید :HTML & CSSResponsive Web design· یک فریم ورک فرانت اند مثل bootstrap یا material designjavascriptJqueryCSS Preprocessor· یک فریم ورک مربوط به جاوااسکریپت مثل react.js یا vue.jsاگر شما به طور کامل به موارد بالا مسلط بشید میشه گفت که یک فرانت اند کار حرفه ای و کار کشته هستید .البته بهتر هست که به این نکته اشاره کنم که بهتره در کنار فرانت اند به طراحی وب سایت هم مسلط باشید .برای back-end کار شدن به چه چیز هایی احتیاج هست ؟اول از همه باید یک زبان برنامه نویسی رو انتخاب بکنید .زبان های برنامه نویسی خیلی زیادی هستند که میشه انتخابشون کرد ، لیست زیر محبوب ترین زبان های برنامه نویسی وب سایت توی دنیا هست :JavascriptPythonPHPC#RubyJavaالبته زبان های دیگه ای هم هستن مثل Go , Scala , C++ , Perl و خیلی چیز های دیگه ، ولی خب لیست بالا محبوب ترین هاست .وقتی که به یکی از زبان های بالا مسلط شدید باید یک دیتا بیس یا پایگاه داده انتخاب کنید .به طور کلی دیتابیس ها به دو دسته زیر تقسیم میشن :SQLNoSQLاین دو یک سری تفاوت های اساسی دارن که توی یه مقاله جدا بهشون میپردازیم .بعد از اینکه به صورت کامل کار با دیتا بیس رو یاد گرفتید باید برید سراغ چیز های دیگه مثل امنیت و جلوگیری از هک وب سایت ، امنیت داده ها ، فریم ورک های مرتبط با زبان برنامه نویسیتون و خیلی چیز های دیگه .توصیه من به شما این هستش که بعد از اینکه توی یکی از زمینه های فرانت اند یا بک اند مهارت پیدا کردید حتما سعی کنید یه دستی توی اون یکی هم ببرید .اگر نمیدونید به شخصی که هم برنامه نویس front-end و هم برنامه نویس back-end هست fullstack میگن .امیدوارم که این مطلب به دردتون خورده باشه اگر به یک road map دقیق و حرفه ای نیاز دارید میتونید این مقاله رو بخونید کسری حبیب بیگی کسری حبیب بیگی Sat, 18 Sep 2021 17:56:20 +0430 https://virgool.io/@kasrahabibbeygi/%D9%87%D9%85%D9%87-%DA%86%DB%8C%D8%B2-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-smacss-%D8%AF%D8%B1-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-css-wkb24zovsf1g اکثر زبان های برنامه نویسی مثل PHP و یا python دارای style guide هستند ، اگر نمیدونید style guide چیه باید بگم که یک سری قوانین و مقررات هستن که باعث میشه کد ها منظم تر بشن و علاوه بر این هر برنامه نویسی ساز خودش رو نزنه و اینطوری نباشه که هر کی از جاش بلند شد بگه این سبک کد نویسی منه !به طور دقیق تر style guide ها یک سری قوانین هستن که ساختار کد های مارو منسجم تر و یکپارچه میکنن مثل PSR-2 style guide که برای PHP هست یا PEP8 که برای پایتون هست ، حالا جالب اینجاست که CSS هم یک Style guide داره به نام SMACSS که به صورت "اسمکس" خونده میشه .بیاد با هم ببینیم که SMACSS چه چیز هایی رو به ما میگه و ما چه چیز هایی رو باید تو کد هامون رعایت کنیم ایده پشت اسمکس این هست که شما کد های css تون رو به 5 قسمت زیر بشکونید :Base , layout , modules , state , themeپایه یا Base :شما میتونید برای پروژتون یه فایل درست کنید که مقادیر اولیه المان هاتون رو تغییر بدید ، البته نه صرفا المان ، میتونید مقادیر اولیه selector ها ، pseudo-selector ، children selector و یا هر چیز دیگه ای رو تغییر بدید مثل کد زیر :html, body, form { margin: 0; padding: 0; } ;input[type=text] { border: 1px solid #999; }; a { color: #039; }; a:hover { color: #03C; };لایه بندی یا layout :در لایه بندی استایل هایی قرار میگیرند که مربوط به لایه بندی سایتتون هستن مثل navbar , footer , articles , aside و یا هر چیز دیگه .مثلا شما میتونید برای اسم گزاری این بخش ها ، اول هر اسم از "L-" استفاده کنید که در واقع مخفف کلمه layout هست و این باعث میشه شما متوجه بشید این بخش مربوط به layout شما هست مثل کلاس زیر :.l-full-width { width: 100%; } .l-half-width { width: 50%;}ماژول ها یا Moduls :ماژول ها پارت هایی هستند که مجدد قابل استفاده هستند ، مثل لیست محصولات یا لیست مقالات و ...اسمکس یه قانون برای نام گزاری ماژول ها داره ، همونطور که میدونید اصولا ماژول ها از پارت های زیادی تشکیل شدن ، برای مثال ما یک کارد article داریم و اسم تگ پدر article هست و داخل این تگ چندین بخش دیگه وجود داره مثل title ، اسمکس میگه برای نام گزاری title ، ابتدا اسم پدر رو بنویسید بعد با دوتا dash "--" اون رو از title جدا کنید یعنی به صورت زیر :.article--titleنکته : اگر مقاله قبلی من در رابطه با استاندارد نام گزاری BEM رو خونده باشید متوجه میشید که این سبک از نام گزاری اصلا شبیه BEM نیست و احتمالا این سوال براتون پیش بیاد که پس چی کار کنیم ؟ از این استفاده کنیم یا از BEM ؟اگر مقاله استاندارد نام گزاری BEM رو نخوندید میتونید از اینجا یه سری بهش بزنید .در جواب سوالتون باید بگم که اگر توی پروژه تنها هستید ، هر کدوم رو که دوست دارید انتخاب کنید و اگر توی یک تیم هستید ، با تیمتون به توافق برسید که بهتر هست از کدوم استفده کنید ، من شخصا BEM رو ترجیه میدم .وضعیت یا state :وضعیت یا state درواقع نشون میده که ماژول های ما توی موقعیت های مختلف چجوری باید باشند .بزارید یه خورده دقیق تر توضیح بدمبرای مثال یکی از روش های درست کردن modal توی javascript این هست که ما یک کلاس درست کنیم به اسم active.active{ display : block; }بعد با استفاده از جاوااسکریپ بگیم وقتی کاربر روی یک دکمه خاص کلیک کرد کلاس active به modal ما اضافه بشه و modal ما روی صفحه به نمایش در بیاد .توی مثال بالا کلاس active در واقع یک state هست که باعث میشه یک المالن تغییر وضعیت پیدا کنه.معمولا state ها بیشتر توی javascript به کار میان .موضوع یا theme :به زبان ساده ، مقادیری مثل رنگ ، سایه ها ، border ها ، شکل های مختلف و هر چیزی که مربوط به برند شما بشه ، theme هستبعضی از وب سایت ها هیچ them خاصی ندارند .توجه کنید که theme سایت شما صرفا برای زیبایی سایت به کار میره و اگر فایل استایل theme رو از سایت حذف کنید نباید به هم ریختگی خاصی تو سایت دیده بشه و سایت شما بدون theme هم باید به درستی کار کنه سخن پایانیدر کل استفاده از این style guide میتونه برای منسجم کردن سایت خیلی مفید باشه ، و نکته مهم تر اینجاست که اگر پس فردا روز یکی دیگه خواست کد های شمارو بررسی که و تغییراتی رو اعمال کنه به راحتی بتونه این کار رو انجام بده .چیز هایی که داخل این نوشته خوندید مطالب مختصری بود از کتاب : Scalable and modular architecture for cssاین کتاب حدود 112 صفحه هست و اگر خواستید بخونیدش میتونید از اینجا کتاب رو دانلود کنید.امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید و برای حمایت از من لایک یادتون نره کسری حبیب بیگی کسری حبیب بیگی Wed, 15 Sep 2021 14:19:19 +0430 https://virgool.io/Whitenoise/%D9%87%D9%85%D9%87-%DA%86%DB%8C%D8%B2-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D8%A7%D8%B3%D8%AA%D8%A7%D9%86%D8%AF%D8%A7%D8%B1%D8%AF-bem-%D8%AF%D8%B1-%D8%AA%D9%88%D8%B3%D8%B9%D9%87-css-j0gb4wynlqlt بدترین مشکلی که هر برنامه نویسی داره و باهاش دست و پنجه نرم میکنه (از برنامه نویس جاوا گرفته تا برنامه نویس فرانت اند ) مشکل نام گزاری متغیر ها ، کلاس ها ، توابع و ... هست.برای رفع این مشکل توی زمینه های مختلف قوانین و قوائد خاصی منتشر شده ، برای مثال توی زبان های برنامه نویسی و زبان های اسکریپت نویسی یک مرجع خیلی مهم وجود داره به نام کتاب Clean code که شمارو کمک میکنه تا کد های خیلی بهتر ، تمیز تر ، بهینه تر و حرفه ای تری تولید کنید ، این مشکل توی css هر به کرات دیده میشه تازه میشه گفت خیلی بیشتر !به خاطر اینکه ما توی css همش با اسم ها سر و کار داریم و اگر بخواهیم به تگ خاصی در HTML استایل بدیم باید از id یا class یا tagName استفاده کنیم پس این مشکل خیلی بیشتر حس میشه و کسانی که با CSS کار میکنن مخصوصا توی پروژه های بزرگ شدیدا با کمبود اسم مواجه میشن و گاهی اوقات میان از اسم هایی که هیچ ربطه به هم ندارن استفاده میکنن که باعث میشه همه چیز فقط بدتر و بدتر بشه ، بعد شما گاهی ممکنه تو این شلوغی ها بخواید یه چیزی رو عوض کنید اون وقت همه چیز به هم میریزه .حالا BEM اومده روشی رو به ما ارائه کرده که از این مخمصه بیرون بیایم و دیگه مشکل نام گزاری رو نداشته باشیم .اصلا BEM چیست ؟به زبان ساده BEM یک استاندارد نام گزاری کلاس ها در CSS است .این عبارت مخفف واژه های Block , Element , Modifier است و درک و نحوه استفاده از اون خیلی ساده و اسونه .به طور کلی استاندارد BEM میگوید که شما هر بخش از سایتتون رو باید یک block در نظر بگیرید مثل شکل زیر :همونطور که در شکل بالا میبینید ما یک block را داریم که شامل یک img ، نوشته و دو تا دکمه هست ، فرض کنید که تمام این بخش ها در یک تگ پدر با کلاس card وجود دارد که اون تگ پدر در واقع همان block ما هست ، حالا با استفاده از BEM به نام گزاری زیر مجموعه های این تگ پدر می پردازیم .حالت کلی استاندارد نام گزاری BEM به این صورت است : BlockName__ElementName--Modifierحال ما نام block را مشخص کردیم که card نام دارد و برای نام گزاری المان های داخلی به این روش پیش میرویم:المان والد ، هر فرزندی به هر تعداد داشته باشد برای نام گزاری فرزند ها ابتدا نام کلاس تگ پدر را مینویسیم و با دو علامت under line (__) آن را از نام کلاس پدر جدا میکنیم برای مثال :.card__image.card__title.card__descriptionحال ما نام element هم مشخص کردیم ، بریم سراغ مرحله آخر یعنی Modifier .اصلاح کننده ها یا Modifier ها چی هستن ؟ در تصویر بالا ما دو تا دکمه داریم که هر کدوم درست شبیه به هم هستن و تنها تفاوت اونها رنگ پس زمینه هست ، به کلاس هایی که فقط مقدار کوچیکی رو مثل رنگ پس زمینه ، رنگ متون یا سایز اونها رو تغییر میدن Modifier میگوییم و برای اینکه بخواهیم در کلاس هامون Modifier هارو جا بدیم ، اسمشون رو با دوتا dash (--) از ما بقی کلاس جدا میکنیم .برای مثال ما برای تغییر رنگ پس زمینه دو دکمه بالا از کلاس های زیر استفاده میکنیم :.card__button--successاین کلاس رنگ دکمه رو به سبز تغییر میده .شاید براتون سوال پیش بیاد که میشه نام element هارو دو بخشی تعریف کرد ؟ بله چرا نمیشه ، اگر نام element را بخواهیم دو بخشی بنویسیم باید بخش دوم را با یک Dash (-) از بخش اول جدا کنیم مثل کلاس زیر :.card__exit-button--dangerبرای کسانی که از preprocessor های css یا همون پیش پردازنده هایی مثل sass استفاده میکنند این استاندارد میتونه خیلی کد هاشون رو تمیز و مرتب و همچنین حرفه ای نگه داره ، به مثال زیر توجه کنید : کد های بالا مربوط به پیش پردازنده SCSS هست سخن پایانیبه طور کلی استفاده از این استاندارد سخت نیست و با چندبار تمرین و تکرار میتونید به راحتی به این روش مسلط بشید و ازش استفاده کنید ، این روش باعث میشه شما دیگه توی نام کلاس ها گیر نکنید و اسم کم نیارید همچنین باعث یک دستی تمام کد های شما توی طول پروژه های کوچیک و بزرگتون میشه .البته باید بگم که هیچ اجباری در استفاده از این استاندارد نیست و شما میتونید از این استاندارد پیروی نکنید و قوانین خودتون رو داشته باشید هر چند باید گفت بهترین کار استفاده از استاندارد هایی هست که اکثر برنامه نویس ها اون رو میشناسن .امیدوارم که این مطلب به دردتون خورده باشه ، نظرات خودتون رو با من به اشتراک بزارید کسری حبیب بیگی کسری حبیب بیگی Tue, 14 Sep 2021 11:29:52 +0430