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

Visual Inspector ابزاری مناسب برای توسعه دهندگان وب

Visual Inspector ابزاری مناسب برای توسعه دهندگان وب

از نوشته های من در کلیک

رسانه کلیک – در این مطلب به معرفی یک افزونه گوگل کروم برای بررسی و ایجاد تغییرات آنلاین در صفحات وب، به سادگی و بدون نیاز به استفاده نرم افزارهای پیچیده می پردازیم.
یکی از بخش های موجود در مرورگرهای اینترنتی که هر دولوپری برای طراحی صفحات وب از آن استفاده می کند، قسمت Developer tools یا جعبه ابزار توسعه دهندگان وب است. این قسمت در بیشتر مروگر ها با استفاده از کلید F12 در پایین صفحه نمایشگر ظاهر می شود و شامل سربرگ ها و امکانات متفاوتی می باشد. امکان تغییر دادن مواردی مثل رنگ نوشته ها، فونت ها، اندازه گیری فاصله بین آیتم های موجود در صفحه و حتی تغییر برخی از کلمات به صورت آنلاین و بدون نیاز به تغییر کدهای اصلی صفحه از جمله مواردی هستند که موجب می شود تا DevTools به ویژه در بین دولوپرهای فرانت اند بسیار محبوب و پراستفاده باشد.
طبق تحقیقات انجام شده امروزه گوگل کروم محبوبترین مرورگر اینترنتی است و توانسته است به مرورگر پیش فرض بسیاری از کاربران تبدیل شود، در نتیجه بازار تولید افزونه های جانبی کروم نیز بسیار داغ بوده و Visual Inspector یکی از محبوترین افزونه ها به عنوان مکملی مناسب برای امکانات پیش فرض DevTools در بین دولوپرهاست.
Visual Inspector یکی از محصولات جدید مجموعه canvasflip از کشور هند است که تاکنون در زمینه تولید اپلیکیشن های مربوط به آنالیز تجربه کاربری فعالیت داشته است.
پس از نصب این افرونه آیکن آبی رنگ آن در قسمت بالا و سمت راست گوگل کروم اضافه می شود، نمایش کد تمامی رنگ های استفاده شده در صفحه به صورت یک لیست واحد در سربرگ COLORS و همچنین جدا کردن تمامی تصاویر موجود در سربرگ ASSETS از جمله ویژگی های این افزونه است که درکنار ارایه امکانات مشابه DevTools آن را بسیار کاربردی می کند.
به گفته Vipul Mishra هم بنیان گذار Canvas Flip از جمله دلایل تولید چنین افزونه هایی آن هم به صورت رایگان افزایش میزان تجربه کاربری در ابزارهای مورد استفاده توسط دولوپرها است، وی همچنین اضافه کرد در نسخه های بعدی این افزونه که تحت یکی از لیسانس های اپن سورس ارایه خواهد شد، امکان ذخیره تغییرات ایجاد شده در دو حالت لوکال و کلود در کنار قابلیت هایی نظیر A/B testing ، ذخیره CSS، و همچنین انجام فعالیت به صورت مشترک بین افراد نیز برای کاربران وجود خواهد داشت.

ادامه مطلب در click.ir

7 محیط تست کد برای دولوپرهای فرانت‌­اند

7 محیط تست کد برای دولوپرهای فرانت‌­اند

وب‌سایت‌های زیادی وجود دارند که دولوپرهای فرانت‌اند می‌توانند کدهای خود را در آن‌ها تست کنند و یا به‌صورت آنلاین به اشتراک می‌گذارند که در این مقاله به معرفی و بررسی 7 مورد از پرطرفدارین Code Playground در این زمینه خواهیم پرداخت.

اگرچه وب‌سایت‌های بسیاری وجود دارند که این امکانات را در اختیار دولوپرها قرار می‌دهند اما ویژگی‌هایی وجود دارد که باعث می‌شود برخی از آن‌ها توجه کاربران را بیشتر به خود جلب نمایند که برخی از مهم‌ترین این ویژگی‌ها عبارتند از:
– رنگ‌بندی کدهای HTML ،CSS و JavaScript
– پنجره‌ای برای نمایش نتیجهٔ اجرای کدها (البته بدون نیاز به رفرش کردن صفحه)
– پشتیبانی از تکنولوژی‌های جدید کدنویسی مثل HAML ،LESS ،SASS و Stylus CSS
– ارائهٔ لایبرری‌های معمول جاوااسکریپت
– ابزارهای ارزیابی سورس‌کد
– به‌اشتراک‌گذاری صفحات با یوآر‌الهای کوتاه
– تغییر ساختار سورس‌کد
– رایگان بودن امکانات
– محیطی مناسب برای نمایش توانایی و مهارت شما در کدنویسی

و مهم‌تر از همه این‌که شما نیازی به اجرای نرم‌افزارهای معمول توسعهٔ نرم‌افزار ندارید و همه‌چیز به‌سرعت و سادگی انجام می‌شود؛ در ادامه به معرفی 7 وب‌سایت محبوب به اشتراک گذاری کد که معمولاً تحت‌عنوان Code Playground شناخته می‌شوند می‌پردازیم:

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

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 ویژگی بسیار مفید فایرفاکس برای فرانت‌اند دولوپرها

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

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

1. خط‌کش‌های افقی و عمودی
یکی از امکانات مفیدی که مرورگر فایرفاکس در ارتباط با بررسی اندازهٔ عناصر صفحه و چیدمان آن‌ها در اختیار دولوپرها می‌گذارد، خط‌کش‌های افقی و عمودی به‌صورت هم‌زمان می‌باشد؛ برای فعال کردن این ویژگی، از منوی کاربری مرورگر به‌ترتیب گزینه‌های 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