https://virgool.io/feed/@ellef توسعه دهنده فرانت اند fa 2026-06-16 18:26:20 https://files.virgool.io/upload/users/1493150/avatar/zXQEaA.png?height=120&width=120 https://virgool.io/@ellef https://virgool.io/Solidity/%D8%A7%D9%86%D9%88%D8%A7%D8%B9-%D9%85%D8%AA%D8%AF%D9%84%D9%88%DA%98%DB%8C-%D9%87%D8%A7%DB%8C-css-%D9%BE%D8%A7%DB%8C%D9%87-%D9%88-%D8%A7%D8%B3%D8%A7%D8%B3-%D9%86%D9%88%D8%B4%D8%AA%D9%86-css-h9ajaqsc2gqs متدولوژی CSS، مجموعه ای از دستورالعمل ها برای نوشتن کدهای ماژولار، قابل استفاده مجدد و مقیاس پذیر است. اگرچه نوشتن CSS، بسیار آسان است، اما بدون قرارداد توافق شده، کدها تقریباً به همان سرعتی که نوشته شده اند، بی نظم و شلوغ و غیرخوانا می‌شوند. از آنجایی که هر اعلان CSS (CSS declaration)در خط خودش تعریف می‌شود، فایل‌ها به سرعت بزرگ می‌شوند و نگهداری از آنها به کابوس تبدیل شود.تصویر1. متدولوژی های CSS برای حل این مشکل و سایر مشکلات پیاده سازی CSS، گروه های برنامه نویس در سراسر جهان متدولوژی های مختلف CSS یا مجموعه ای از شیوه های نوشتن استاندارد را توسعه داده اند. هر کدام تمرکز، مزایا و معایب خاص خود را دارند. این ها، چارچوب یا کتابخانه نیستند، بلکه یک سری قوانین برای نوشتن کد CSS هستند که توسعه‌دهندگان را تشویق می‌کند تا به قراردادهایی پایبند باشند که نوشتن و نگهداری کدها را آسان‌تر می‌کند و در زمان توسعه صرفه‌جویی می شود. این متدولوژی ها، متقابلاً منحصر به فرد نلوده و می توانند با هم به گونه ای استفاده شوند که برای توسعه دهندگان مناسب باشد. تعدادی از متدولوژی‌های محبوب CSS عبرتند از: CSS شی گرا (OOCSS)CSS اتمی (Atomic css)BEM SMACSSCSS شی گرا (OOCSS)خلاصه OOCSS: طرح بندی را به اشیاء تقسیم کنید، سپس CSS آنها را به ماژول ها خلاصه کنید.OOCSS شامل شناسایی اشیاء در یک صفحه و جداسازی سبک های ساختاری و بصری CSS آنها به دو بلوک اعلان است. سپس این بلوک ها می توانند توسط عناصر مختلف مورد استفاده مجدد قرار گیرند و تغییرات فقط در یک مکان انجام شود که منجر به سازگاری بهتر می شود.بلوک‌های اعلان (declared blocks) برای جلوگیری از مشکلات اختصاصی، روی عناصر با استفاده از انتخابگرهای تک کلاس اعمال می‌شوند. این تکنیک همچنین محتوا را از ظرف جدا می کند، بنابراین اشیا در هر کجا که ظاهر می شوند یکسان به نظر می رسند. کلاس ها همچنین نشانه گذاری را از CSS جدا می کنند. برای درک بهتر این قاعده به عکس زیر دقت نمایید: تصویر 2. نحوه نوشتن CSS به سبک OOCSSOOCSS مفاهیم مفید زیادی را معرفی می کند، اما فقدان قوانین مشخصی در آن منجر به تغییراتی در تفسیر می شود که می تواند منجر به ناسازگاری شود. با این حال، از آن در ایجاد و ساختار قواعد جدیدتر و بهینه تر استفاده می شود.CSS اتمی (Atomic css)خلاصه CSS اتمی: برای هر اعلان CSS تکراری یک انتخابگر کلاس ایجاد کنید.ACSS توسعه دهندگان را تشویق می کند تا انتخابگرهای کلاس تک منظوره را برای هر اعلان قابل استفاده مجدد تعریف کنند. برخلاف OOCSS، که مقادیر ویژگی های CSS را در نام کلاس ها منع می کند، ACSS از آن استقبال می کند.رویکردهای برنامه‌ای برای ACSS وجود دارد که به طور خودکار CSS را بر اساس کلاس‌ها یا ویژگی‌هایی که کاربران به HTML اضافه می‌کنند، تولید می‌کنند. مزیت اصلی ACSS سهولت در حفظ کد یکنواخت و عدم نیاز به اختراع کلاس برای مؤلفه هایی است که به یک قانون CSS نیاز دارند.با این حال، ACSS به تنهایی می تواند منجر به تعداد غیرقابل مدیریت کلاس ها و فایل های HTML حجیم شده شود. بنابراین معمول است که فقط از اصول ACSS برای ایجاد کلاس های کمکی که بلوک های اعلان سازگار و قابل استفاده مجدد را تعریف می کنند، استفاده کنیم. تصویر 3. نحوه نوشتن کلاس CSS به سبک ACSSBlock Element Modifierخلاصه BEM: از یک قرارداد نامگذاری استاندارد برای کلاس ها استفاده کنید.BEM توسعه دهندگان را تشویق می کند تا طرح بندی ها را به بلوک ها و عناصر تو در تو تقسیم کنند. تغییرات از ظاهر متوسط ​​یک بلوک یا عنصر نیز باید با استفاده از اصلاح‌کننده‌ها شناسایی و اعمال شوند.اعلان‌های CSS با استفاده از یک نام کلاسی با فرمت block-name برای بلوک‌ها و block-name__element-name برای عناصر، با دو زیر خط (underline)در بین اعمال می‌شوند. نام‌های اصلاح‌کننده برای وضوح بهتر به کلاس‌ها اضافه می‌شوند، به عنوان مثال block-name__element-name_modifer-name یا block-name__element-name--modifer-name. یک شی یک بلوک است اگر بتواند بدون اجداد وجود داشته باشد، در غیر این صورت یک عنصر محسوب می شود.بلوک ها می توانند بلوک ها و عناصر تودرتو داشته باشند، اما عناصر نمی توانند. اصلاح کننده ها باید در کنار کلاس های بلوک و عنصر استفاده شوند، نه به جای آنها.BEM را می توان روی یک لیست اعمال کرد، به نحوی که که list-block--inline و list-block__item--active به ترتیب لیست های نمایش افقی و برجسته کردن موارد است.تصویر4. نحوه نوشتن کلاس CSS به روش BEMBEM یک قرارداد نامگذاری بسیار مؤثر است که CSS با رفتار قابل پیش بینی ایجاد می کند که مدیریت، نگهداری و مقیاس آن آسان است. با این حال، BEM دارای نکات منفی است، از جمله دشواری در اختراع نام کلاس برای اشیاء عمیق تو در تو، نام‌های طولانی کلاس و HTML حجیم که گاهی اوقات ممکن است به وجود بیاید، و همچنین عدم سازگاری ناشی از ناتوانی در اشتراک گذاری CSS بین اشیا.معماری مقیاس پذیر و ماژولار برای CSS (SMACSS)به طور خلاصه: کد CSS را در چندین فایل برای عملکرد و سازماندهی بهتر تقسیم کنیدSMACSS با تقسیم CSS به پنج دسته - پایه، طرح، ماژول، حالت و موضوع - معمولاً به فایل های جداگانه تقسیم می شود. سبک های پایه سبک های پیش فرض را لغو می کنند و عمدتاً با استفاده از انتخابگرهای عنصر اعمال می شوند. امیدوارم بتونید بهترین استفاده را از این مقاله برده و در نوشتن استایل های خود از آن استفاده کنید. ولی به نظر من بهترین نحوه یادگیری این مقاله دیدن مثال های عملی اون هست، پس حتما از لینک هایی که گذاشتم استفاده کنید و هم چنین خود این موارد رو توی گوگل سرچ کنید تا مثال های نوشتاری اونها رو ببینید و بهتر درک کنید و درست و صحیح استفاده کنید. Elle f Elle f Fri, 25 Feb 2022 23:11:06 +0330 https://virgool.io/Devedoping/%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%81%D9%88%D9%86%D8%AA-%D8%A2%DB%8C%DA%A9%D9%86-%D9%87%D8%A7-%D9%88-%D9%86%D8%AD%D9%88%D9%87-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-%D8%A2%D9%86%D9%87%D8%A7-icon-fonts-rppld8iijsrx فونت آیکون ها، راه حلی محبوب برای مشکلات رایج CSS هستند. چگونه آیکون های وب را به روشی کارآمد و سریع در طراحی وب سایت خود بگنجانید.با تعداد زیادی خدمات در دسترس برای آسان کردن انتخاب و استفاده از فونت آیکون، لازم نیست فونت خود را از ابتدا ایجاد کنید. این فونت آیکون ها در سراسر اینترنت در دسترس شما هستند.اما فونت آیکون دقیقا چیست؟ و چگونه از آنها استفاده می کنید؟ در اینجا راهنمای همه چیزهایی است که باید در مورد فونت ایکن ها و نمادها را بدانید، برایش شما شرح میدهم.فونت های آیکون، فونت هایی هستند که به جای حروف یا اعداد، حاوی نمادها و علامت ها هستند. آنها از محبوبیت ویژه ای برای طراحان برخوردار هستند، زیرا می توانید آنها را با کمک CSS، مانند متن معمولی استایل دهید. همچنین، از آنجایی که آنها بردار هستند، به راحتی مقیاس پذیر هستند. آنها کوچک هستند، بنابراین به سرعت بارگیری می شوند و سئو سایت شما را بهبود می بخشند. هم چنین، این فونت ها در همه مرورگرها پشتیبانی می شوند. تصویر 1. فونت ایکن ها (Icon fonts)دلایل اصلی استفاده از فونت آیکون این است که می توانید اندازه، رنگ، شکل را به راحتی تغییر دهید. فونت های نماد تصاویر برداری هستند، به این معنی که مقیاس پذیر هستند. فونت‌های آیکون ذاتاً شفاف هستند، بنابراین می‌توانید آن‌ها را روی هر رنگ یا نوع پس‌زمینه‌ای قرار دهید و می‌توانید ضخامت ها را اضافه کنید یا وضوح آیکون‌ها را تغییر دهید. نکته قشنگ ماجرا دقیقا این جاست که همه این کارها با CSS انجام می شود، بنابراین لازم نیست برای هر نمونه جدید از یک نماد در طراحی، تصاویر منحصر به فردی ایجاد کنید. (این برای سبک نگه داشتن وب سایت و کد شما عالی است که خود این موضوع برای سئو وبسایت شما حائز اهمیت است) . مزایا و معایب استفاده از فونت آیکون ها پس با توجه به مواردی که در بالا ذکر شد، مزایای قابل توجهی برای استفاده از فونت های نماد به جای تصاویر بیت مپ در پروژه های شما وجود دارند از جمله:می توانید هر افکت CSS را روی آنها اعمال کنید. همچنین تغییر رنگ آنها یا اضافه کردن سایه به شکل فونت ایکون ساده است. هم چنین میتوانید فونت ایکون را مانند هر فونت دیگری، به اندازه دلخواه بزرگ یا کوچک کنید. از فونت آیکون ها به تنهایی به عنوان عناصر هنری یا حتی پراکنده در سایر فیلدهای متنی استفاده کنید.از آنجایی که آنها داراری گرافیک برداری هستند، مقیاس پذیر هستند. این بدان معناست که می‌توانید بدون از دست دادن کیفیت، آنها را کم یا زیاد کنید.شما به جای چندین درخواست HTTP که ممکن است تصاویر بیت مپ به آن نیاز داشته باشند، یک یا چند درخواست HTTP برای بارگیری آنها ارسال می کنید.آنها به دلیل اندازه کوچک خود سریع بارگیری می شوند.آنها در همه مرورگرها (حتی به IE6) پشتیبانی می شوند.فونت‌های آیکون راه بسیار ساده‌ای برای راه‌حل برای برخورد با طراحی واکنش‌گرا برای پروژه های ما هستند.بنابراین، آیا فونت ایکون برای همه موارد مناسب هستند؟ تصمیم با شماست! این فونت ها یک راه عالی برای بهبود طراحی یک پروژه هستند اما محدودیت هایی نیز دارند.به عنوان مثال: اگر می خواهید به جای یک نماد ساده، یک تصویر پیچیده را در پروژه خود نشان دهید، فونت آیکون بهترین راه حل نیست.آنها همچنین معمولاً به یک رنگ محدود می شوند، مگر اینکه از برخی ترفندهای CSS استفاده کنید. علاوه بر این، فونت‌های آیکون بر اساس شبکه‌های خاصی طراحی می‌شوند، به عنوان مثال 16px16، 32×32، 48×48، و غیره. اگر به دلایلی سیستم شبکه را به 25×25 تغییر دهید، احتمالاً نتایج واضحی دریافت نخواهید کرد (CSS می تواند کمک کند).مسئله دیگر در مورد دسترسی است. استفاده از تمام اشکال رایگان نبوده و برای برخی از آنها نیاز به پرداخت هزینه های متفاوتی است. بسیار ساده است که یک متن با اندازه های مختلف برای اندازه های دید متفاوت ارائه شود، اما تغییر اندازه تصاویر بسیار دشوارتر است. محبوب ترین و شناخته شده ترین کتابخانه فونت آیکون به شرح زیر می باشند:Font Awesome IcoMoon EntypoFlaticonIcofontFontelloتصویر2. نمونه ای از نحوه استفاده از font awesome در HTML برنامه تصویر3. نمونه ای از نحوه استفاده از font awesome در HTML برنامه و نمایش نتایجتصویر4. نمونه ای از نحوه استایل دهی به فونت ایکن ها این فونت آیکون ها با تمام ابزارهای محبوب، از جمله Web Fonts + CSS، SVG + JS، Sketch، Adobe Apps، Vue.js، Angular، React و Ember کار می کند و شما می توانید از این فونت ها در سایت خود از طریق اعلامیه CSS @font-face استفاده کنید.امیدوارم این مقاله از فونت آیکن ها برای شما جالب بوده باشد و شاید این شما را تشویق کند که از یکی از آنها در پروژه های آینده خود استفاده کنید.اگر فونت‌های آیکون یا پروژه‌های وب دیگری را می‌شناسید که از آنها برای ایجاد طرح‌های جالب استفاده می‌کنند، در نظرات به اشتراک بگذارید تا بقیه دوستانمون هم از آنها بهره ببرند Elle f Elle f Mon, 21 Feb 2022 22:05:58 +0330 https://virgool.io/@ellef/%DA%86%D8%B7%D9%88%D8%B1-%D8%A8%D9%87%D8%AA%D8%B1%DB%8C%D9%86-%D9%88%D8%A7%D8%AD%D8%AF-css-css-unit%D8%B1%D8%A7-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%B7%D8%B1%D8%AD-%D8%A8%D9%86%D8%AF%DB%8C-%D8%AE%D9%88%D8%AF-%D8%A7%D9%86%D8%AA%D8%AE%D8%A7%D8%A8-%DA%A9%D9%86%DB%8C%D9%85-ax0hrjfg8t1t واحدهای CSS یکی از مهم ترین و اساسی‌ترین جنبه‌هایی هستند که در هنگام ایجاد طرح‌بندی سایت باید در نظر گرفته شوند. این واحدها نحوه تعامل طراحی شما بر روی دستگاه های مختلف را مشخص می کنند، به عنوان مثال تبلت، گوشی های متفاوت و ... .اما هنگامی که صحبت از واحدهای CSS می شود، گزینه های زیادی برای انتخاب وجود دارند و همه گزینه ها برابر نیستند. واحدهای CSS فقط به فونت ها محدود نمی شوند، بنابراین به عنوان یک توسعه دهنده فرانت اند، باید بدانید که چگونه این واحدها بر طرح بندی ها تأثیر می گذارند.در این مقاله، من به شما نشان خواهم داد که واحدهای CSS مختلف چگونه کار می کنند، بنابراین می توانید از آنها برای ایجاد طرح بندی و طراحی سایت بهتر استفاده کنید.تصویر1. CSS Units یا واحدهای اندازه گیری CSSانواع واحدهای CSSواحدهای CSS را می توان در 3 دسته بندی، طبقه بندی کرد:واحدهای مطلق (Absolute units)واحدهای نسبی فونت (Font relative units)واحدهای نسبی Viewport (Viewport relative units)واحدهای مطلق (absolute units)برخی از واحدها به مقادیر مطلق خاصی بستگی دارند و اندازه صفحه یا فونت بر آنها تأثیر نمی گذارد. نمایش این واحدها ممکن است بسته به وضوح صفحه نمایش متفاوت باشد، زیرا به DPI (نقطه در هر اینچ) صفحه نمایش بستگی دارد.این واحدها عبارتند از:px (پیکسل)in(اینچ)cm (سانتی متر)mm (میلی متر)pc (پیکاس)pt (پوینت)پیکسل (px)پیکسل ها رایج ترین واحد مورد استفاده و پذیرفته شده هستند. و پایه اندازه گیری بسیاری از واحدهای دیگر در نظر گرفته می شود. همچنین پیکسل ها سازگارترین نتیجه را در بین دستگاه های مختلف ارائه می دهد و در تمام اندازه های صفحه نمایش ثابت می ماند. تمام واحدهای مطلق دیگر مانند in (اینچ)، cm (سانتی متر) و mm (میلی متر) واحدهای اندازه گیری دنیای واقعی با موارد استفاده بسیار کمی از CSS در دنیای واقعی هستند.با این حال، درک رابطه آنها با پیکسل ها هنوز خوب است، بنابراین مقایسه آنها به این صورت است:1 اینچ = 96 پیکسل1 سانتی متر = 37.8 پیکسل1 میلی متر = 3.78 پیکسلدر حالی که pc (picas) و pt (نقاط) ارتباط مستقیمی با اینچ دارند.1 اینچ = 72pt1 اینچ = 6 ptرابطه بین تمام واحدهای مطلق را می توان به صورت تصویر زیر نشان داد:تصویر2. واحدهای مطلق و مقایسه آنها (absolute units)واحدهای نسبی فونت (Font relative units)واحدهایی وجود دارند که به اندازه قلم یا خانواده فونت سند یا عناصر سطح والد آن بستگی دارند. واحدهای نسبی شامل واحدهای زیر می شود: emremexchEmام (Em)یک واحد طول نسبی است که وابسته به اندازه فونت عنصر والد یا سند دارد. به طور پیش فرض،در صورتی که اندازه فونت تعریف نشده باشد، 1em برابر با 16 پیکسل است.Em اندازه را از اندازه فونت والد بالایی خود به ارث می برد. مثلاً اگر یک عنصر والد دارای اندازه قلم: 18 پیکسل باشد، 1em برای همه فرزندش 18 پیکسل اندازه‌گیری می‌شود.در نتیجه، عناصر فرزند مقادیرشان را از والد به ارث می برند. مزیت استفاده از em این است که اگر تصمیم دارید اندازه قلم، بالشتک و حاشیه هر عنصر را به تناسب تغییر دهید، فقط باید اندازه فونت عنصر والد را تغییر دهید و همه عناصر دیگر مطابق با آن تنظیم می شوند.این در مورد واحدهای مطلق مانند px صدق نمی کند.رم (rem)Rem برخلاف em، به اندازه فونت عنصر ریشه اشاره می کنند، نه عنصر والد.اکس (Ex)Ex نسبت به x-height فونت فعلی است و به ندرت از آن استفاده می شود. اندازه گیری قد x سازگار نیست. گاهی از خود فونت می آید و گاهی مرورگر خودش محاسبه می کند.مانند em و rem، به فونت بستگی دارد، اما تفاوت عمده این است که ex با تغییر خانواده فونت نیز تغییر می کند، که در مورد دو مورد دیگر صدق نمی کند.سی اچ (ch)Ch شبیه ex است اما به x-height بستگی ندارد. بلکه به عرض کاراکتر صفر (0) بستگی دارد و با font-family تغییر می کند.واحدهای نسبی Viewportچند واحد وجود دارند که به ارتفاع و اندازه درگاه دید یا همان view port ما بستگی دارد، مانند:vh (viewport height)vw (viewport width)vmin (viewport min)vmax (viewport max)تصویر3. واحدهای نسبی viewportارتفاع درگاه دید یا ارتفاع ویوپورت (vh)Vh (ارتفاع درگاه دید) برابر با 1 درصد از ارتفاع درگاه دید است. این واحد برای ایجاد عناصر تمام ارتفاع بسیار مفید است. Vh به طور مشابه به درصد واکنش نشان می دهد، اما به ارتفاع عنصر والد بستگی ندارد. شما می توانید از vh در هر جایی استفاده کنید، اما رایج ترین مورد استفاده از vh برای ساخت عناصر با ارتفاع کامل است.عرض درگاه دید یا عرض ویوپورت (vw)Vw (عرض دید) شبیه به vh است اما به جای ارتفاع درگاه دید، عرض را در نظر می گیرد. 1vw برابر با 1% از عرض دید است. اگر می خواهید یک نمای واکنشگرا بر اساس تایپوگرافی ایجاد کنید، این واحدها می توانند واقعا مفید باشند.مینیمم عرض یا ارتفاع درگاه دید یا ویوپورت (Vmin)Vmin بر اساس حداقل مقدار عرض یا ارتفاع ویوپورت محاسبه می شود، هر کدام کوچکتر باشد. فرض کنید که اندازه نمایی با ارتفاع 1000 پیکسل در عرض 800 پیکسل دارید. 1vmin برابر با 8px خواهد بود.ماکزیمم عرض یا ارتفاع درگاه دید یا ویوپورت (Vmin)Vmax دقیقاً برعکس vmin محاسبه می‌شود، جایی که حداکثر مقدار viewport در نظر گرفته می‌شود.واحد درصد (%)واحد درصد (%) به دسته خاصی که در بالا ذکر شد تعلق ندارد، اما می تواند به عنوان یک واحد نسبی طبقه بندی شود. درصدهایی که تعریف می شوند نسبت به عنصر والد خود است.درصد در درجه اول با ارتفاع و عرض یک عنصر مرتبط است، اما می تواند در هر جایی که واحدهای طول CSS مجاز هستند استفاده شود.درصد یکی از مفیدترین واحدها برای ایجاد یک چیدمان پاسخگو یا روان است. فریمورک های محبوبی مانند Bootstrap ، foundation و Bulma از درصد برای چیدمان پایه خود استفاده می کنند.تصویر4. نمونه ای از نحوه نوشتن واحد اندازه گیری برای فونت یا ایتم های برنامهدر این مقاله سعی کردم تقریباً تمام واحدهای CSS موجود برای استفاده را برای شما پوشش دهم اما مهم است که در نظر داشته باشید که بسته به اهداف شما، برخی از آنها بهتر از سایرین مناسب خواهند بود.«به عنوان یک توسعه‌دهنده فرانت‌اند، همیشه خوب است که گزینه‌های خود را بدانید زیرا هرگز نمی‌دانید که ممکن است در پروژه بعدی خود به کدام یک نیاز داشته باشید. ”امیدوارم این واحدها را به خوبی یاد گرفته باشید و بتوانید بهترین و درست ترین پروژه ها را با آنها پیاده سازی کنید. Elle f Elle f Sat, 19 Feb 2022 11:21:01 +0330 https://virgool.io/@ellef/%D9%87%D8%B1-%D8%A2%D9%86%DA%86%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%B1%D8%A8%D8%A7%D8%B1%D9%87-%D8%B7%D8%B1%D8%AD-%D8%A8%D9%86%D8%AF%DB%8C-%D8%B4%D8%A8%DA%A9%D9%87-%D8%A7%DB%8C-css-grid-layout-%D8%A8%D8%AF%D8%A7%D9%86%DB%8C%D8%AF-ce3q6mznaaxn CSS Grid Layout در تقسیم یک صفحه به مناطق اصلی و در نظر گرفتن اندازه، موقعیت و لایه، بین بخش ها واجزای ساخته شده از HTML ابتدایی به کار می رود.جداول را در نظر بگیرید، همانند جدول ها، طرح‌بندی یا چیدمان شبکه‌ای CSS grid layout برای نویسنده این امکان را فراهم می سازد تا عناصر را در ستون‌ها و ردیف‌ها تراز کند. با این حال، طرح‌بندی‌های بسیار بیشتری با شبکه CSS نسبت به جداول امکان‌پذیر است، یا حتی می توان گفت آسان‌تر است. به عنوان مثال، عناصر فرزند توسط شبکه بندی لایه ای می توانند خود را طوری قرار دهند که در واقع روی هم قرار بگیرند و لایه لایه شوند، شبیه به کاری که بر روی عناصر توسط پوزیشن یا موقعیت CSS انجام می شوند.تصویر1. نمایی تصویری از مفهوم CSS grid چیدمان شبکه ای به ما این امکان را می دهد که قرارگیری عناصر را در امتداد محورهای عمودی و افقی کنترل کنیم. خالی از لطف نیست که متذکر شویم که این امکان درچیدمان flex box برقرار نیست و در flex فقط در یک راستا می توانیم چیدمان عناصر را انجام دهیم. سیستمی که فلکس باکس باشد، یک سیستم چیدمان 1 بعدی داشته که باعث می شود برخی از طرح‌بندی‌های دو بعدی را نتوان توسط آن پیاده سازی کرد. Flexbox به راحتی می‌تواند از طرح‌های منحصربه‌فردی پشتیبانی کند که سطرها و ستون‌های متعدد را با کمک wrap گسترش می‌دهند.در CSS Grid ما می توانیم تا آنجا پیش برویم که موقعیت دقیق هر آیتم شبکه را با استفاده از اعداد سطر و ستون تعریف کنیم. از این رو می‌توانیم شبکه CSS را یک سیستم طرح‌بندی دوبعدی بنامیم. شمای ساده ای از تفاوت بین این دو سیستم چیدمان را در تصویر 2 مشاهده می کنید.تصویر2. نمایی تصویری از تفاوت بین فکس و گرید چیدمان شبکه ای CSS grid از رویکرد سفت‌و سخت و مبتنی بر طرح‌بندی(layout-driven) برای قرار دادن آیتم پیروی می‌کند. در grid، طرح‌بندی اولیه را دقیقاً با استفاده از تعداد ستون‌ها و/یا ردیف‌هایی با ویژگی‌های grid-template-rows و grid-template-columns تعریف می کنیم. سپس، هنگام محاسبه ارتفاع و عرض هر مورد، از خطوط شبکه ایجاد شده پیروی می کند.از آنجایی که تمرکز اصلی شبکه CSS بر روی چیدمان است، نتیجه نهایی یک طراحی مبتنی بر شبکه به راحتی قابل پیش بینی است، در صورتی که در فلکس باکس اینطور نیست. Grid همچنین فضایی را برای انعطاف‌پذیری بیشتر در طراحی از طریق افزودن ردیف‌های خودکار در شبکه، ستون‌های شبکه‌ای و ویژگی‌های جریان خودکار شبکه (grid-auto-flow ) ایجاد می کند. این، شبکه را قادر می‌سازد تا ردیف‌ها یا ستون‌های بیشتری را به صورت سیال اضافه کند تا همه موارد موجود را در خود جای دهد.]چه زمانی از شبکه CSS استفاده کنیم؟بهترین . کاربردی ترین زمان استفاده از شبکه CSS، زمانی است که بخواهید اجزای رابط کاربری ویا عناصر را با چیدمان های دقیق و منظم کنار هم قرار دهید. در عمل، شبکه CSS معمولاً برای ایجاد طرح‌بندی کل صفحه با هدر، پاورقی، ستون‌های کناری و غیره استفاده می‌شود. طرح‌بندی‌هایی که به سیستم‌های شبکه پیچیده مانند شبکه‌ای ۱۲ ستونی یا طرح‌های نامتقارن نیاز دارند، به طور معمول توسط شبکه‌ی CSS ساخته می شوند.شبکه همچنین برای طراحی اجزای کوچکتر و تک بعدی زمانی که نیاز به قرار گیری دقیق عناصر دارند، مناسب است.ایجاد طرح‌بندی با عناصر همپوشانی شوندهاز آنجایی که شبکه CSS به ما این امکان را می دهد تا موقعیت دقیق یک عنصر را تعریف کنیم، طراحی طرح بندی با اجزای همپوشانی (overlapping) به یک کار ساده تبدیل می شود. در مقایسه، اگر بخواهیم این را با flexbox پیاده‌سازی کنیم، باید به روش هایی مانند تعیین حاشیه‌های منفی، موقعیت‌یابی مطلق یا تبدیل‌ها تکیه کنیم.تصویر 3. ایجادطرح بندی با عناصر هم پوشانی شونده (overlapping elements)دراین مقاله تلاش کردم کلیات و مفهوم این مبحث مهم رو به صورت روان براتون توضیح بدم. اما، پیشنهاد میکنم برای یادگیری هرچه بهتر این مفهوم به صورت عملی از منابع زیر حتما حتما استفاده کنید: learncssgridswappsdeveloper.mozillaBasic concepts of grid layoutw3schoolscss-tricksحالا که در حد خوبی با Css grid آشنا شدید میتونید به سایت های زیر هم برید و با بازی کردن این مفهوم را کاملا در ذهن خودتون تثبیت کنید.cssgridgardencss-grid-attackgridcrittersحیف هست حالا که با بازی مفهوم گرید رو در ذهن تثبیت کردیم، فلکس باکس رو فراموش کنیم. در سایت زیر میتونید بازی کنید و این مفهوم را هم در ذهن خود تثبیت کنید و درک بهتری از مفاهیم Flexbox و grid داشته باشید.flexboxfroggyممنونم که تا انتهای این مقاله هم با من همراه بودید. امیدوارم با مطالعه این مقاله و مراجع ذکر شده و همچنین بازی ها حاوی این مفاهیم درک صحیح و خوبی از این مفاهیم به دست آورید. Elle f Elle f Mon, 14 Feb 2022 23:41:58 +0330 https://virgool.io/@ellef/%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%DA%AF%D9%88%D9%86%D9%87-%DA%A9%D8%A7%D8%B1-%D9%85%DB%8C-%DA%A9%D9%86%D8%AF-suoux4rpcrqi مرورگر وب چیست؟یک مرورگر وب شما را به هر نقطه از دنیای وسیع اینترنت می برد و به شما امکان می دهد متن، تصاویر و ویدیو را از هر نقطه از دنیا که حضور دارید ببینید.وب ابزاری گسترده و بسیار قدرتمند است. در طول چند دهه، اینترنت، روش کار و نحوه تعامل ما با یکدیگر را تغییر داده است. بسته به نحوه استفاده از آن، بین کشورها پل ارتباطی برقرار می‌کند، تجارت را پیش می‌برد، روابط را تقویت می‌کند، موتور نوآوری آینده را به حرکت در می‌آورد و بیش از آنچه می‌دانیم باید با آن‌ها چه کار کنیم، مسئول ایجاد الگوهای رفتاری است.شکی نیست که این مهم است که همه به وب دسترسی داشته باشند، اما مورد مهم تر این است که همه ما ابزارهایی را که برای دسترسی به آن استفاده می کنیم، درک کنیم. ما هر روز از مرورگرهای وب مانند موزیلا فایرفاکس، گوگل کروم، مایکروسافت اج و اپل سافاری استفاده می کنیم، اما آیا می دانیم که آنها چه هستند و چگونه کار می کنند؟ در مدت زمان کوتاهی، ما از شگفت‌زده شدن از توانایی ارسال ایمیل به یک نفر در سراسر جهان، به تغییر در نحوه تفکر ما نسبت به اطلاعات تبدیل شده‌ایم. این مسئله دیگر این نیست که چقدر می دانید، بلکه صرفاً این است که چه مرورگر یا برنامه ای می تواند شما را سریعتر به آن اطلاعات برساند.تصویر 1. مررورگر های مختلف (web broswers)مرورگر وب چگونه کار می کند؟مرورگر، یک برنامه نرم افزاری است که برای مکان یابی، بازیابی و نمایش محتوا در شبکه جهانی وب، از جمله صفحات وب، تصاویر، ویدئو و سایر فایل ها استفاده می شود. به عنوان یک مدل کلاینت/سرور، مرورگر کلاینتی است که روی رایانه ای اجرا می شود که با وب سرور تماس می گیرد و اطلاعاتی را درخواست می کند. وب سرور اطلاعات را به مرورگر وب می فرستد که نتایج را روی رایانه یا سایر دستگاه های فعال اینترنت که از مرورگر پشتیبانی می کند نمایش می دهد.یک مرورگر وب شما را به هر جای اینترنت می برد. این اطلاعات را از سایر قسمت های وب بازیابی می کند و آن را روی دسکتاپ یا دستگاه تلفن همراه شما نمایش می دهد. اطلاعات با استفاده از پروتکل انتقال ابرمتن، که نحوه انتقال متن، تصاویر و ویدئو در وب را مشخص می کند، منتقل می شود. این اطلاعات باید به اشتراک گذاشته شود و در قالبی ثابت نمایش داده شود تا افرادی که از هر مرورگر و در هر کجای دنیا استفاده می کنند بتوانند اطلاعات را ببینند.متأسفانه، همه سازندگان مرورگر تصمیم نمی گیرند که قالب را به یک شکل تفسیر کنند. برای کاربران، این بدان معنی است که یک وب سایت می تواند ظاهر و عملکرد متفاوتی داشته باشد. ایجاد یکپارچگی بین مرورگرها، به طوری که هر کاربر بدون توجه به مرورگری که انتخاب می کند، بتواند از اینترنت استفاده کرده و لذت ببرد، استانداردهای وب نامیده می شود.مرورگرهای امروزی مجموعه‌های نرم‌افزاری کاملاً کاربردی هستند که می‌توانند صفحات وب HTML، برنامه‌های کاربردی، جاوا اسکریپت، AJAX و سایر محتوای میزبانی شده بر روی سرورهای وب را تفسیر و نمایش دهند. بسیاری از مرورگرها پلاگین هایی را ارائه می دهند که قابلیت های نرم افزار را گسترش می دهند تا بتواند اطلاعات چندرسانه ای (از جمله صدا و ویدئو) را نمایش دهد، یا از مرورگر می توان برای انجام کارهایی مانند ویدئو کنفرانس، طراحی صفحات وب یا افزودن فیلترهای ضد فیشینگ استفاده کرد. مرورگر گروهی از کدهای ساختاریافته است که با هم مجموعه ای از وظایف را برای نمایش یک صفحه وب روی صفحه انجام می دهند. این کدها با توجه به وظایفی که انجام می دهند به صورت اجزای مختلف ساخته می شوند.هنگامی که مرورگر وب داده ها را از یک سرور متصل به اینترنت واکشی می کند، از نرم افزاری به نام موتور رندر برای ترجمه آن داده ها به متن و تصویر استفاده می کند. این داده ها به زبان نشانه گذاری فرامتن (HTML) نوشته شده اند و مرورگرهای وب این کد را می خوانند تا آنچه را که در اینترنت می بینیم، می شنویم و تجربه می کنیم، ایجاد کنند.هایپرلینک ها به کاربران این امکان را می دهند که مسیری را به سایر صفحات یا سایت های وب دنبال کنند. هر صفحه وب، تصویر و ویدیو دارای مکان یاب منبع یکنواخت (URL) منحصر به فرد خود است که به عنوان آدرس وب نیز شناخته می شود. هنگامی که یک مرورگر برای داده‌ها از سرور بازدید می‌کند، آدرس وب به مرورگر می‌گوید که در کجا به دنبال هر موردی که در html توضیح داده شده است بگردد، که سپس به مرورگر می‌گوید کجا در صفحه وب می‌رود.کوکی ها در مرورگر وب (نه اون کوکی های خوشمزه که میخوریم)وب سایت ها اطلاعات مربوط به شما را در فایل هایی به نام کوکی ذخیره می کنند. آنها برای دفعه بعدی که از آن سایت بازدید می کنید در رایانه شما ذخیره می شوند. پس از بازگشت شما، کد وب سایت آن فایل را می خواند تا متوجه شود که شما هستید. به عنوان مثال، هنگامی که به یک وب سایت می روید، صفحه نام کاربری و رمز عبور شما را به خاطر می آورد - که توسط یک کوکی ممکن شده است.تصویر2. کوکی ها در مرورگر وب (web browser cookies)همچنین کوکی هایی وجود دارند که اطلاعات دقیق تری را درباره شما به خاطر می آورند. شاید علایق شما، الگوهای مرور وب شما و غیره. این بدان معناست که یک سایت می تواند محتوای هدفمندتری را در اختیار شما قرار دهد که البته اغلب به شکل تبلیغات صورت می پذیرد. انواعی از کوکی‌ها به نام کوکی‌های شخص ثالث وجود دارند که از سایت‌هایی می‌آیند که در آن زمان حتی از آنها بازدید نمی‌کنید و می‌توانند شما را از سایتی به سایت دیگر برای جمع‌آوری اطلاعات درباره شما ردیابی کنند، که گاهی به شرکت‌های دیگر فروخته می‌شود. گاهی اوقات می‌توانید این نوع کوکی‌ها را مسدود کنید، اگرچه همه مرورگرها این اجازه را به شما نمی‌دهند.درک حریم خصوصی توسط مرورگرهاتقریباً همه مرورگرهای اصلی دارای تنظیمات مرور خصوصی هستند. اینها برای پنهان کردن سابقه مرور از سایر کاربران در همان رایانه وجود دارند. بسیاری از مردم فکر می کنند که مرور خصوصی یا حالت ناشناس هویت و سابقه مرور آنها را از ارائه دهندگان خدمات اینترنتی، دولت ها و تبلیغ کنندگان پنهان می کند، اما نمی کنند. این تنظیمات فقط تاریخچه سیستم شما را پاک می کنند، که اگر با اطلاعات شخصی حساس در رایانه مشترک یا عمومی سروکار دارید، مفید است. اکثر مرورگرهای وب اصلی به کاربران اجازه می دهند تجربه خود را از طریق برنامه های افزودنی یا افزونه ها تغییر دهند. برنامه‌های افزودنی بخش‌هایی از نرم‌افزار هستند که می‌توانید آن‌ها را به مرورگر خود اضافه کنید تا آن را سفارشی کنید یا عملکردی اضافه کنید. برنامه‌های افزودنی می‌توانند انواع کارهای سرگرم‌کننده و کاربردی مانند فعال کردن ویژگی‌های جدید، فرهنگ لغت‌های زبان خارجی، یا ظاهر و مضامین بصری را انجام دهند.همه سازندگان مرورگرها محصولات خود را به گونه‌ای توسعه می‌دهند که تصاویر و ویدیوها را در سریع‌ترین زمان ممکن و به آرامی نمایش دهند، و به شما این امکان را می‌دهند که بهترین استفاده را از وب داشته باشید. همه آنها سخت کار می کنند تا مطمئن شوند کاربران مرورگری دارند که سریع، قدرتمند و آسان برای استفاده است. جایی که آنها تفاوت دارند دلیل آن است. مهم است که مرورگر مناسب خود را انتخاب کنید. موزیلا فایرفاکس را می سازد تا اطمینان حاصل کند که کاربران بر زندگی آنلاین خود کنترل دارند و اطمینان حاصل کند که اینترنت یک منبع جهانی و عمومی است که برای همه قابل دسترسی است. Elle f Elle f Wed, 09 Feb 2022 22:38:52 +0330 https://virgool.io/@ellef/%D9%87%D8%A7%D8%B3%D8%AA-%D9%88-%D8%AF%D8%A7%D9%85%DB%8C%D9%86-%D8%AF%D8%A7%D9%85%D9%86%D9%87-%D8%A8%D9%87-%D8%B2%D8%A8%D8%A7%D9%86-%D8%B3%D8%A7%D8%AF%D9%87-dbmahd3jl3d7 آیا شما هم از درک تفاوت بین نام دامنه (domain) در مقابل میزبانی وب ( هاست - web hosting) گیج شده اید؟ و می خواهید تفاوت این دو را یکبار برای همیشه بدانید؟در ابتدا لازم است بدانید که برای ایجاد یک وب سایت شما به هر دو مقوله دامنه و هاست در کنار هم نیاز دارید. نام دامنه شما آدرس دائمی وب سایت شما در اینترنت است به عنوان مثال: دامنه سایت دیجی کالا به این شکل زیر نمایش داده می شود:https://www.digikala.comتصویر1. دامنه (دامین) چیست؟دامنه، آدرس وب سایت شما است و URL نیز نامیده می شود. در بیشتر موارد، نام دامنه شامل نام شرکت و انتهای آن بسته به تفکر و تعریف پایه و اساس شرکت است، مانند .com یا .net و ... . یک آدرس وب شخصی سازی شده، برند شما را تقویت می کند و به بازدیدکنندگان کمک می کند شما را به خاطر بسپارند.چرا به دامنه نیاز دارید؟دامنه موجب می شود که وب سایت شما حرفه ای به نظر برسد و برای کاربران شما اعتماد ایجاد کند. انتخاب صحیح دامنه نمایانگر شما و وب سایت شما است. یک نام دامنه منحصر به فرد همچنین، یافتن وب سایت شما را از طریق موتورهای جستجوگر مانند Google آسان تر می کند و باعث افزایش بازدهی و سئو سایت شما نیز می شود.3 نکته مهم که باید در انتخاب نام دامنه مناسب در نظر داشته باشیدآن را ساده نگه دارید. اگر نام دامنه شما خیلی طولانی باشد، به خاطر سپردن، خواندن و تایپ کردن آن برای بازدیدکنندگان سخت خواهد بود. املا آن را آسان کنید و سعی کنید از اعداد و خط فاصله استفاده نکنید.پسوند دامنه ای را انتخاب کنید که با وب سایت شما مطابقت دارد. انتهای دامنه ای که انتخاب می کنید اطلاعات بیشتری در مورد کسب و کار شما به مشتریان می دهد. برای مثال، «.co.uk» نشان می‌دهد که شما ساکن بریتانیا هستید. برای انتخاب بهتر پسوند دامنه خود می توانید از این مرجع کمک بگیرید.از کلمات کلیدی متناسب با کسب و کار یا خدمات شما استفاده کنید. این به مشتریان کمک می کند تا سایت شما را پیدا کنند. به عنوان مثال، اگر شما یک عکاس عروسی از ایران هستید، weddingphotosiran.com ممکن است گزینه خوبی باشد.تصویر2. انتخاب نام دامنه مناسب در سئو سایت هاست (میزبانی وب)، موتوری است که وب سایت شما را تقویت می کند. وب سایت شما از تعداد نامشخصی فایل، پوشه و داده تشکیل شده است. برای اینکه بازدیدکنندگان بتوانند وب سایت شما را مشاهده کنند، این اطلاعات باید در یک سرور (رایانه) قرار داده شود که بازدیدکنندگان بتوانند به آن دسترسی داشته باشند. اینجاست که سرورهای میزبانی وب نقش مهمی ایفا می کنند. این سرورهای میزبان فایل های وب سایت شما را با هزینه ای اندک ذخیره می کنند و به بازدیدکنندگان اجازه دسترسی و مشاهده وب سایت شما را از دامنه ای که انتخاب کرده اید فراهم می سازد.به منظور درک نحوه میزبانی وب سایت، باید بدانید که یک وب سرور تا حدودی شبیه یک رایانه خانگی است، اما به طور خاص برای ذخیره وب سایت ها ساخته شده است. همیشه روشن است و پیوسته به اینترنت متصل است.تصویر3. سرورهای میزبانی وب (هاستینگ)تفاوت بین نام دامنه و میزبانی وباگرچه نام دامنه و میزبانی وب اغلب با هم خریداری می شوند، اما در واقع همانطور که در بالا اشاره کردیم دو چیز کاملا متفاوت هستند. تفاوت های اصلی بین نام دامنه و میزبانی وب:میزبانی وب(هاستینگ) جایی است که فایل های وب سایت شما به صورت فیزیکی ذخیره می شوند، در مقابل، نام دامنه، آدرس آن مکان ذخیره سازی است.شما نمی توانید بدون خرید یک نام دامنه، یک وب سایت ایجاد کنید، اگرچه می توانید بدون ایجاد یک وب سایت، یک نام دامنه داشته باشید.به زبان راحت تر، شما به راحتی و از هر وبسایت فروش دامنه، می توانید یک دامنه با نام دلخواه تهیه کنید، اما اگر بخواهید یک هاستینگ را خریداری کنید، از شما نام دامنه را هم میخواهد و در صورت عدم موجود بودن دامنه، امکان خرید هاستینگ برای شما فراهم نمی باشد.تصویر4. همپوشانی هاست و دامین در کنار همچگونه بهترین هاست وب را برای سایت خود انتخاب کنیدمیزبانی وب بخش اساسی هر وب سایتی است. انتخاب شرکت هاستینگ و طرحی که برای سایت شما مناسب است، باید به دقت مورد توجه قرار گیرد. همه هاست ها یکسان ایجاد نمی شوند، و شما باید مطمئن شوید که تمام ویژگی های مورد نیاز خود را دریافت می کنید.خوشبختانه، اینجا در این بلاگ، ما تجربه زیادی در مورد میزبانی وب داریم، و می دانیم ضروری ترین معیارها برای انتخاب هاست مناسب چیست. هنگامی که دقیقاً متوجه شدید که به دنبال چه هستید، در موقعیتی عالی قرار خواهید گرفت که وب سایت جدید خود را راه اندازی کنید.در این جا ما به بررسی 16 معیار اساسی می پردازیم که می توانید از آنها برای انتخاب بهترین سرویس میزبانی وب برای سایت خود استفاده کنید: نیازهای وب سایت شما (Website’s Needs)دوره اشتراک(Subscription Period)قابلیت اطمینان و آپتایم سرور(Server Reliability and Uptime)سیاست بازپرداخت و تضمین(Refund Policy and Guarantees)گزینه های ارتقا(Upgrade Options)ویژگی های اولیه(Primary Features)محصولات و خدمات افزودنی(Add-on Products and Services)کارکرد سایت تجارت الکترونیک(E-commerce Site Functionality)قیمت ثبت نام و تمدید(Sign-Up and Renewal Prices)صفحه کنترل(Control Panel)محدودیت های حساب(Account Limitations)دوستی با محیط زیست(Environmental Friendliness)میزبانی ایمیل(Email Hosting)گزینه های پشتیبان گیری وب سایت(Website Backup Options)حمایت کردن(Support)پاسخگویی سرور(Server Responsiveness)در مقاله آینده به تک تک این موارد به طور مجزا خواهیم پرداخت، امیدوارم این مطلب برای شما کاربردی بوده باشد.شما می توانید دامنه و هاست خود را از سایت های معتبر ایرانی یا خارجی خریداری نمایید، و با استفاده از نکات ذکر شده اساس و پایه درستی برای سایت خود و نام آن در نظر بگیرید. Elle f Elle f Wed, 09 Feb 2022 21:47:03 +0330 https://virgool.io/@ellef/%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF%DA%86%DB%8C%D8%B3%D8%AA-osc3yy2wpkhq اگر تازه به مسیر برنامه نویسی وارد شدید، ممکن است اصطلاح Front-End Development (توسعه فرانت اند) و Front-End Developer (توسعه دهنده فرانت اند) را شنیده باشید و بخواهید بدانید که این اصطلاح رایج و پر کاربرد به چه معناست. تا انتهای این مقاله همراه من باشید تا به شما کمک کنم به درک کاملی از مفهوم فرانت اند دست یابید.تصویر1. افراد اصلی تیم قدتمند فرانت انددر این مقاله توضیح خواهم داد که مفهوم توسعه فرانت اند چیست، به چه مهارت هایی برای تبدیل شدن به یک توسعه دهنده Front-End نیاز دارید، رزومه قوی مخصوص خود را بسازید و چگونه شغل مد نظر خود را پیدا کنید.توسعه فرانت اند (Front-End Development) به چه معنا است؟فرانت (Front) در عبارت فرانت اند (Front-End)به معنی پیش یا جلو است. در نتیجه، هنگامی که از تخصص فرانت اند Front-End صحبت میکنیم، اشاره به بخش‌های جلو و مقابل دارد. یعنی تمام آن بخش‌هایی که کاربر با آن‌ها تعامل دارد و ارتباط برقرار می‌کند مانند لوگو، نوار جستجو، دکمه‌ها، پیوندها، انیمیشن‌ها و موارد دیگر که در وبسایت ها و اپلیکیشن ها مشاهده می کنید. از این رو به آن، Client Side نیز گفته می شود. تمام آن چه که کدنویس فرانت اند طراحی می‌کند و کاربر و مخاطبان آن را می‌بینند، توسط یک توسعه‌دهنده وب ظاهری یا Front-End Developer ایجاد می شوند. این وظیفه توسعه دهندگان فرانت اند است که چشم انداز و مفهوم طراحی را از مشتری دریافت کرده و آن را از طریق کد پیاده سازی کنند. تمام چیزهای قابل مشاهده برای کاربر که در صفحه وجود دارند،طرح کلی و نحوه تعامل کاربر با صفحه توسط یک توسعه دهنده جلویی (فرانت) ایجاد شده است. توسعه دهندگان فرانت اند مسئول ظاهر و احساس وب سایت هستند.از مهم ترین وظایف توسعه دهندگان فرانت اند، همچنین باید به اطمینان از رسپانسیو بودن وب سایت در تمام دستگاه ها (تلفن، تبلت و صفحه نمایش رایانه) اشاره کرد. این بدان معنا است که صفحات باید در همه ابعاد و تمامی دستگاه ها خوب و درست به نظر برسند و تمام امکانات برای کاربر قابل دست یابی و دسترسی باشد.تصویر2. رسپانسیوسازی و رسپانسیو وب دیزاینحالا باید ببینیم برای تبدیل شدن به یک توسعه دهنده فرانت اند به چه مهارت هایی نیاز دارید؟برای تبدیل شدن به یک فرانت اند کار حرفه ای و بی نظیر لازم است که به HTML ، CSS و زبان برنامه نویسی جاوا اسکریپت تسلط داشته باشید. هم چنین، در کنار دانش عمیقی ازاین سه مفهوم بایستی بر روی چارچوب ها، کتابخانه ها و سایر ابزارهای مفید مرتبط با آنها نیز تمرکز کنید. این ابزارها و موارد مهم دیگر شامل مهارت های تست گرفتن و اشکال زدایی، کنترل نسخه و مهارت حل مسئله می باشد برای کسب اطلاعات بیشتر راجع به مهارت های مورد نیاز میتوانید از این مرجع بسیار کارامد و مفید راهنمایی بگیرید.زبان نشانه گذاری HTMLزبان نشانه گذاری HTML مخفف Hyper Text Markup Language است. HTML ستون فقرات هر فرآیند توسعه صفحه وب و اپلیکیشن ما است که بدون آن هیچ صفحه وب وجود نخواهد داشت. هم چنین، به کمک آن ساختار اصلی صفحاتمان را تعیین میکنیم. فرامتن (Hyper Text)به این معنی است که متن دارای پیوندهایی است که به آن هایپرلینک گفته می شود و در متن جاسازی شده است. هنگامی که کاربر روی کلمه یا عبارتی که دارای هایپرلینک است کلیک می کند، صفحه وب دیگری را ایجاد می کند. زبان نشانه گذاری نشان می دهد که می توان متن را به تصاویر، جداول، پیوندها و دیگر ایتم های نمایش ها تبدیل کرد. این کد HTML است که یک چارچوب کلی از ظاهر سایت را برای کاربران ارائه می دهد. HTML محتوا و ساختار اصلی صفحه مانند دکمه ها، پیوندها، سرفصل ها، پاراگراف ها، لیست ها و .. را نمایش می دهد. HTML توسط تیم برنرز لی توسعه داده شد و آخرین نسخه HTML به نام HTML5 در 28 اکتبر 2014 توسط توصیه W3C منتشر شد. این نسخه شامل روش های جدید و کارآمدی برای مدیریت عناصری مانند فایل های ویدئویی و صوتی است.به یاد داشته باشید که HTML یک زبان نشانه گذاری است، نه یک زبان برنامه نویسی! پس اگر از شما بخواهند زبان های برنامه نویسی را نام ببرید یادتان باشد که HTMLو CSS جزو این موارد نیستند. حال این سوال برای شما ایجاد شده است که چرا HTML زبان نشانه گذاری نام گذاری شده است؟ زیرا به واسطه کدهای خاص و نام گذاری هایی که ما در html داریم نوع، تعداد و محل تگ هایمان را تعیین میکنیم و عملا هر تگ، جا و عملکرد مخصوص و منحصر به فرد خود را دارا می باشدآیا برای یادگیریHTML به استاد، بوت کمپ و یا کلاس خاصی احتیاج دارم؟برای یادگیری این زبان نشانه گذاری، اینترنت و سایت های معتبر و قوی بهترین مربی شما هستند، چند سایت پیشنهادی قدرتمند و رایگان برای یادگیری HTML به شرح زیر هستند:w3schoolscodecademydash.generalassemblyndateamtreehouseweb.devlearn-htmlhtmlcourseraedxudemycodeavengerskhanacademyfreecodecamphtml5rocksdeveloper.mozillaبرگه های سبک آبشاری (CSS)کلمه CSS مخفف عبارت Cascading Style Sheets (برگه های سبک آبشاری) است. CSS مسئول نمایش دهی و ظاهر مناسب صفحه وب شما از جمله رنگ ها، طرح بندی ها و انیمیشن ها است تا کاربر پسند باشد. هم چنین اینکه CSS به سایت شما اجازه می دهد ظاهر منحصر به فرد خود را داشته باشد. CSS این کار را با حفظ شیوه نامه هایی که در بالای سایر قوانین سبک قرار می گیرند انجام می دهد و بر اساس ورودی های دیگر مانند اندازه صفحه نمایش و وضوح دستگاه فعال می شوند. CSS چگونگی قرارگیری المان های صفحات وب را تعیین می کند و به کمک آن سند به فرم و شکل قابل استفاده برای مخاطب تبدیل می شود.تصویر3. تفاوت HTML و CSSتصویر 3 به خوبی تفاوت میان HTML و CSS را نشان می دهد. HTML همانطور که گفته شد به معنی اسکلت اصلی سند و صفحات و بدنه ی ما می باشد و محل قرارگیری المان های ما را تعیین می کند. CSS از سوی دیگر به این اسکلت ساخته شده رنگ و ظاهری دلنشین و کاربر پسند می بخشد.طراحی واکنشگرا یا طراحی ریسپانسیو در ایجاد وب سایت هایی که در تمام دستگاه ها خوب و درست به نظر می رسند ضروری است و به کمک CSS صورت می پذیرد تا مطمئن شویم که قابلیت دسترسی عملی به وبسایت شما برای تمامی افراد فراهم می باشد. شما نمی خواهید وب سایت هایی را ایجاد کنید که کسانی که از فناوری های کمکی مانند صفحه خوان استفاده می کنند نتوانند از آن بهره ببرند. علاوه بر این موضوع، در صورت عدم تطابق سایت شما با کلیه دستگاه ها(رسپانسیو نبودن)، امکان اینکه توسط موتورهای جستجوگر مانند گوگل امتیاز منفی کسب کرده و امار بازدید سایت شما کاهش یابد افزایش می یابد، همواره به یاد داشته باشید که یک برنامه نویس فرانت اند خوب نه تنها باید در مباحث برنامه نویسی دقت لازم را به عمل اورد، بلکه بایستی این کدنویسی همسو با افزایش بازدهی و engagement سایت شما یعنی در نظر گرفتن سئو باشد. از این رو فهم دانش سئو در کنار کدنویسی به شما کمک میکند که کدهای منطقی تر، تمیزتر و درست تری داشته باشید و مخاطبان بیشتری را به سایت خود جذب نمایید. چارچوب‌های CSS (Framework)، کتابخانه‌ها (Libraries )و پیش‌پردازنده‌ها (Preprocessors)پس از یادگیری اصول اولیه CSS، می توانید کار با چارچوب ها و کتابخانه های مختلف را شروع کنید. این ابزارها به عنوان راهی برای کمک به سرعت بخشیدن به روند توسعه ایجاد شدند.چارچوب هایی مانند Bootstrap و Tailwind CSS به شما امکان می دهند کاتالوگ کلاس ها را به صفحه وب خود اضافه کنید. در نتیجه، طراحی‌های حرفه‌ای تر و سازگار با موبایل را خواهید داشت.باتوجه به نیازمندی ها و فناوری های مورد نیاز در کار خود می توانید از هرکدام از چارچوب ها استفاده کنید استفاده کنید. سپس می‌توانید بر رایج‌ ترین مهارت‌های مورد تقاضا تمرکز کنید. فریم ورک های کاربردی CSS: بوت استرپ (Bootstrap)تیلویند (Tailwind CSS)بولما (Bulma)متریالایز (Materialize)رابط کاربری معنایی (Semantic UI)پیش پردازنده های CSS: سَس Sassلِس Less این پیش پردازنده ها به شما امکان می دهند منطق و عملکرد را به CSS خود اضافه کنید.و کار با CSS شما را تمیز، سریا و آسان می کنند.حال این سوال ایجاد میشود که آیا می توانم خودم خودآموز CSS را هم یاد بگیرم؟جواب سوال شما "بله" است و بهترین سایت های یادگیری CSS در زیر برای شما آورده شده اند: w3schoolsweb.devcodecademycss-tricksfrontendmastersedxudemyilovecodingdeveloper.mozillaجاوا اسکریپتجاوا اسکریپت (Javascript) یا به اختصار js یک زبان سطح بالای تفسیری و قدرتمند برنامه نویسی است که به کاربران اجازه می دهد تا درون و بین صفحه وب تعامل و ارتباط برقرار کنند و به اصطلاح سایت را داینامیک میسازد. هم چنین، پیاده‌سازی ویژگی‌های سخت و پیچیده در صفحات به کمک js میسر می شود. از Js برای ایجاد حرکات پویا مانند نمایش به‌روز رسانی‌ های محتوا، گرافیک‌های متحرک دوبعدی و سه بعدی، نقشه‌های تعاملی و… در سایت استفاده می شود. به عنوان مثال، هنگامی که بر روی دکمه Menu کلیک شود، یک لیست کشویی از گزینه ها برای کاربر باز می شود. و با هربار کلیک بر روی این دکمه، این لیست باز و بسته می شود. همین موضوع باعث ایجاد سایت هایی تعامل پذیر با رابطه ای غنی و حرفه ای با کاربر می شود.تصویر4. ساخت منو با استفاده از htmlو css و پویا کردن آن به کمک js با در نظر گرفتن رسپانسیو سازی در کلیه دستگاه هاکتابخانه ها و چارچوب های جاوا اسکریپتچارچوب ها و کتابخانه ها به شما این امکان را می دهند که در زمان صرفه جویی کنید و کارهای بیشتری را با کدهای کمتر انجام دهید. جاوا اسکریپت دارای فریم ورک ها و کتابخانه های متنوع و پرکاربردی می باشد که شامل موارد زیر می باشند: Angular Vue.js React این فریم ورک ها و کتابخانه ها پیاده سازی و نوشتن جاوااسکریپت را ساده تر کرده و موجب سهولت در نوشتار کدهای سمت فرانت شده و پیاده سازی صفحات را برای ما راحت تر میکند و امکانات بی نظیری برای ما قرار می دهد.بهترین سایت های یادگیری js به صورت رایگان در زیر آورده شده اند: freeCodeCamp.orgJavaScript 30CodeMentorEducative.io – Learn HTML, CSS, and JavaScript from ScratchLearn JavaScript - Full Course for Beginners from freeCodeCampJavaScript.infoCodecademySololearnCourseraMediumJavaScript Weekly تصویر5. مقایسه عملکرد html، css و js در توسعه فرانت اند مهارت های تست گرفتن و اشکال زدایی (Testing and debugging skills)یکی از ویژگی های بسیار مهم یک برنامه نویس فرانت اند این است که همانطور که در حال توسعه برنامه خود هست، خطاهایی که در کد شما وجود دارند را پیدا کرده و اصلاح نماید. اشکال زدایی، به عمل شناسایی خطاها ("اشکالات") و رفع آنها اطلاق می شود. تست کردن یکی دیگر از مهارت های مهم برای یادگیری است. نوشتن تست برای کد شما راهی است برای اطمینان از اینکه کد شما همان کاری را که قرار است انجام دهد، به درستی انجام می دهد.برای کسب دانش بیشتر و عمیق تر در زمینه تست و دیباگ کردن می توانید از این مرجع کامل استفاده نمایید.کنترل نسخه (Git)کنترل نسخه از مهارت های مهم و راهی برای ردیابی و مدیریت تغییرات کد پروژه است. Git نرم افزار محبوبی است که برای ردیابی کد شما استفاده می شود.اگر چیزهای زیادی را در کد خود به هم ریخته اید، می توانید به جای بازنویسی دستی همه چیز، از Git برای بازگشت به نسخه قبلی کد خود استفاده کنید.کنترل نسخه همچنین به شما این امکان را می دهد که با سایر افراد در یک تیم همکاری کنید و از مکان های مختلف تغییراتی را در پایگاه کد یکسان ایجاد کنید.از این رو لازم است شروع به یادگیری Git کنید و از سرویسی مانند GitHub برای میزبانی پروژه های شخصی خود استفاده کنید.حل مسئلهشاید بتوان گفت که مهمترین مهارت برای هر توسعه دهنده این است که بداند چگونه مشکل و مسائل را حل کند. شرکت ها و مشتریان به دنبال ارائه راه حل های شما هستند. مهم است که یاد بگیرید چگونه یک مشکل را در ابتدا پیدا کرده و سپس آن را به قطعات کوچکتر قابل مدیریت تقسیم کنید و مشکل را در این برنامه های وب عیب یابی و حل کنید.چگونه می توانید به عنوان یک توسعه دهنده فرانت اند شغل پیدا کنید؟هنگامی که جنبه های فنی توسعه front end را یاد گرفتید، باید بر روی کنار هم قرار دادن موارد درخواست شغل خود تمرکز کنید. منابع باورنکردنی زیادی وجود دارد که می تواند به شما کمک کند تا یاد بگیرید که چگونه یک شغل توسعه دهنده پیدا کنید. به یاد داشته باشید که پس از یادگیری این مهارت ها، مهارت رزومه نویسی درست را یاد گرفته که بتوانید به درستی و خوبی مهارت های خود را به افرادی که علاقه مند به کار با شما هستند انتقال دهید. منابع زیر می توانند شما را در ساخت یک رزومه خوب یاری کنند :devedopingHow to Get Your First Dev Job – Insights from Reviewing Career Switchers' RésumésHow to Write a Developer Resume that Recruiters Will ReadHow to write an awesome junior developer résumé in a few simple stepsامیدوارم این مقاله برای شما مفید بوده باشد و بتوانید از مراجع بسیار خوب که برای ورود به این دنیای عظیم مورد نیاز است، بهترین استفاده را برده و روزی مقاله شما را در این سایت و سایت های دیگر به عنوان یک فرانت انت کار قدرتمند بخوانیم. Elle f Elle f Mon, 07 Feb 2022 12:56:18 +0330