بایگانی دسته: آموزش Front-end Development

CSS Icon: یک گالری تمام عیار از آیکان­‌های CSS برای دولوپرهای فرانت­‌اند

CSS Icon: یک گالری تمام عیار از آیکان­‌های CSS برای دولوپرهای فرانت­‌اند

شرکت Adobe به واسطهٔ نرم‌افزارهایی نظیر فتوشاپ، ایلاستریتور، پریمیر، افترافکت و البته ادوبی آکروبات‌ریدر برای اجرای فایل‌های پی‌دی‌اف، در بین کاربران کامپیوتر نامی آشنا و محبوب می‌باشد. Wenting Zhang یکی از طراحان این شرکت، اخیراً وب‌اپلیکیشن بسیار جذابی را معرفی نموده است که بااستفاده از آن می‌توان آیکان‌هایی ساخت که تنها بااستفاده از کدهای CSS ایجاد شده‌اند! این سرویس CSS Icon نام دارد و می‌تواند ابزاری بسیار مفید به‌خصوص برای دولوپرهای فرانت‌اند باشد.

CSS Icon کاملاً رایگان و اپن‌سورس بوده و تمامی فایل‌های آن از ریپازیتوری CSS Icon در گیت‌هاب قابل دانلود می‌باشند؛ آیکان‌های ایجاد شده توسط این اپلیکیشن هیچ وابستگی به سایر لایبرری‌های CSS ندارند و برای نمایش آن‌‌ها در مرورگر نیازی به ویژگی و امکانات خاصی نیست.

خواندن ادامه مطالب در sokanacademy.com

چرا هر دولوپری باید به یک کاربر حرفه‌ای گوگل­ کروم تبدیل شود؟

چرا هر دولوپری باید به یک کاربر حرفه‌ای گوگل­ کروم تبدیل شود؟

امروزه مرورگرها نقشی فراتر از یک نمایش‌دهنده صفحات وب پیدا کرده‌اند و با امکاناتی که در اختیار کاربران خود به‌ویژه دولوپرها قرار می‌دهند، یکی از پایه‌های توسعهٔ وب نیز به شمار می‌آیند؛ در همین راستا، گوگل‌ کروم توانسته است به یکی از ارکان مهم توسعهٔ وب در سطح جهان تبدیل شود. اگر شما هم یک دولوپر مشتاق و علاقه‌مند به یادگیری هستید، این مطلب که در آن به بررسی امکانات پایه‌ای گوگل‌ کروم می‌پردازیم، می‌تواند برایتان جالب و البته مفید باشد.
به‌طور قطع، مرورگرهای زیاد دیگری نظیر سافاری، فایرفاکس، اکسپلورر و … هم وجود دارند، اما کروم دارای ویژگی‌های زیادی است که به‌سادگی نمی‌توان از آن‌ها گذشت؛ حتی می‌توان گفت ابزارهایی که گوگل‌ کروم به‌ویژه در حالت پیش‌فرض در اختیار کاربران و به‌خصوص دولوپرها قرار می‌دهد، تا حدودی استثنایی هستند.
صفحات وب از کنار هم قرار گرفتن تگ‌های HTML ساخته شده‌اند و هر یک از این تگ‌ها عنصری از صفحه را ایجاد می‌نمایند؛ در کروم اگر بر روی عنصری از صفحه کلیک راست کنید و گزینهٔ Inspect را از منوی باز شده انتخاب نمایید، ساختار و تگ‌های HTML تشکیل دهندهٔ آن قسمت در پنجره‌ای به نام جعبه‌ابزار دولوپر (Developer Tools) در پایین صفحهٔ نمایش به شما نشان داده خواهد شد.

خواندن ادامه مطالب در sokanacademy.com

 

آنالیز کدهای CSS وب­‌سایت با افزونهٔ CSS Dig گوگل کروم

آنالیز کدهای CSS وب­‌سایت با افزونهٔ CSS Dig گوگل کروم

جعبه‌ابزار ویژهٔ دولوپرها در گوگل‌کروم (Chrome DevTools) امکانات زیادی از ویرایش آنلاین صفحات وب تا بررسی دقیق ریکوئست‌های HTTP یک صفحه به همراه جزئیات را در اختیار کاربران قرار می‌دهد، اما جای قابلیتی برای آنالیز دقیق کدهای CSS و قوانین آن در این جعبه‌ابزار خالی است که این جای خالی هم به لطف افزونهٔ اپن‌سورس CSS Dig پر شده است.

CSS Dig این امکان را در اختیار دولوپرهای فرانت‌اند می‌گذارد تا در گوگل کروم به‌ بررسی تمام سلکتورها، اتریبیوت‌ها و خصوصیات منحصربفرد موجود در CSS بپردازند؛ این افزونه رایگان بوده و امکانات بسیاری را به‌ویژه در اختیار دولوپرهای رابط کاربری سایت قرار می‌دهد.

پس از انتخاب یک فایل CSS در پنل‌کاربری CSS Dig، اطلاعات زیادی از جمله سلکتورها، موارد تکراری و همچنین بخش‌های غیر‌ضروری و استفاده‌نشده برای دولوپر نشان داده می‌شوند.

برای شروع استفاده از این افزونه، پس از نصب بر روی آیکان (d) آبی‌ رنگ اضافه شده در قسمت بالا سمت راست (محل قرارگیری پیش‌فرض) گوگل‌کروم کلیک نموده و CSS‌های موردنظر را از لیست انتخاب نموده، سپس Start Digging را کلیک نمایید.

 

خواندن ادامه مطالب در sokanacademy.com

بررسی 10 ویژگی بسیار مفید فایرفاکس برای فرانت‌اند دولوپرها

بررسی ۱۰ ویژگی بسیار مفید فایرفاکس برای فرانت‌اند دولوپرها

در گذشته فایرفاکس یکی از محبوترین مرورگر‌ها بین طراحان وب‌سایت به‌شمار می‌آمد؛ امکاناتی نظیر مالتی‌تب، نمایش صحیح کدها و … از جمله مواردی بودند که مرورگر فایرفاکس را به مرورگر پیش‌فرض هر دولوپری تبدیل می‌نمود. اگرچه با گذشت زمان و به‌ویژه پس از معرفی کروم توسط گوگل شرایط تغییر کرد، اما فایرفاکس همچنان یکی از قدرتمندترین مرورگرها به‌ویژه برای دولوپرهای فرانت‌اند به‌شمار می‌آید. در این مقاله به بررسی ۱۰ ابزار مفیدی که فایرفاکس در اختیار کاربران خود قرار می‌دهد تا بتوانند کارهای خود را آسان‌تر و سریع‌تر انجام دهند خواهیم پرداخت.

۱٫ خط‌کش‌های افقی و عمودی
یکی از امکانات مفیدی که مرورگر فایرفاکس در ارتباط با بررسی اندازهٔ عناصر صفحه و چیدمان آن‌ها در اختیار دولوپرها می‌گذارد، خط‌کش‌های افقی و عمودی به‌صورت هم‌زمان می‌باشد؛ برای فعال کردن این ویژگی، از منوی کاربری مرورگر به‌ترتیب گزینه‌های Developer و سپس Developer Toolbar را انتخاب نمایید (همچنین می‌توانید از ترکیب کلیدهای میانبر Shift + F2 نیز استفاده نمایید). در کامندلاین ایجاد شده در قسمت پایین صفحه، عبارت Rulers را نوشته و اینتر کنید.

اگر می خواهید این ویژگی در پنجرهٔ Developer Tools نیز اضافه شود، پس از باز نمودن این قسمت (کلید F12 را فشار دهید) از بخش بالا و سمت راست آن، روی آیکون چرخ‌دنده (Toolbox Options) کلیک نمایید. از میان گزینه‌های قابل انتخاب، Toggle rulers for the page را فعال نمایید؛ پس از آن، آیکون خط‌کش به این پنجره اضافه شده و می‌توانید در صورت نیاز، به‌راحتی از آن استفاده نمایید.

خواندن ادامه مطالب در sokanacademy.com

 

راهنمای عملی و کاربردی برای افزایش سرعت وب‌سایت

راهنمای عملی و کاربردی برای افزایش سرعت وب‌سایت

نخستین گام در بهینه‌سازی پرفورمنس یک وب‌سایت، یافتن مواردی است که دارای اولویت بیشتری برای انجام تغییرات می‌باشند؛ اگرچه ابزارهای زیادی برای بررسی و افزایش میزان کارایی و بهینه‌سازی وب‌سایت‌ در دسترس است، اما بااستفاده از مواردی که در ادامه به معرفی آن‌ها می‌پردازیم، می‌توان بهترین نتایج را به‌ ساده‌ترین شکل ممکن کسب نمود.

امکانات مرورگر گوگل کروم (Chrome Developer Tools)
امروز اکثر مرورگرها دارای امکانات این‌چنینی برای دولوپرهای وب و به‌خصوص دولوپرهای فرانت‌اند (نمای‌ وب) می‌باشند؛ این بخش از امکانات اغلب بااستفاده از کلید F12 کیبورد قابل دسترس می‌باشد و می‌توان گفت تقریباً تمامی مرورگرها امکانات برابری را به کاربران ارائه می‌دهند، اما به‌نظر می‌رسد که گوگل کروم باتوجه بیشتر به نحوهٔ ارائهٔ امکانات و تجربه‌ٔکاربری، گزینهٔ مناسبتری از سایرین در این زمینه باشد.
برای مشاهدهٔ گزارش پرفورمنس یک وب‌سایت، پس از باز نمودن آن در مرورگر گوگل کروم و استفاده از کلید F12 کیبورد، پنجره‌ای در قسمت پایین صفحهٔ مرورگر باز می شود؛ همچنین از ترکیب کلیدهای Ctrl+Shift+I در سیستم‌عامل‌های ویندوز و گنو/لینوکس و Cmd+Opt+I در سیستم‌عامل مک نیز می‌توان به این قسمت دسترسی داشت (محل قرارگیری این پنجره را با استفاده از روش درگ کردن می‌توان جابه‌جا نمود).
از سربرگ‌های ارائه شده، گزینه Network را انتخاب نموده و همچنین قسمت Disable Cache را نیز فعال نمایید (با این‌کار می‌توان مطمئن بود که گزارش‌های ارائه شده کاملاً مشابه با تجربه‌ٔکاربری فردی است که اولین بازدید خود از وب‌سایت را انجام می‌دهد).
سپس صفحه را مجدداً بارگذاری نمایید؛ در این مرحله از کار نتایج مربوط به گزارش‌ها و نمودارهای وب‌سایت به شما نشان داده خواهند شد (البته بررسی تمامی جزئیات نتایج ارائه شده در سربرگ Network بسیار زمان‌بر می‌باشد و در این نوشته تنها گزینه‌های کاربردی و مهم آن‌را معرفی می‌کنیم.)

خواندن ادامه مطالب در sokanacademy.com