طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت | برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

۲۸تیر

فرم ها تقریبا بخش مهمی از هر وب سایتی هستند با این حال ما همیشه به جزئیات به صورت دقیقی توجه نمی‌کنیم. کارهایی وجود دارد که می‌توان برای بهبود فرم ها انجام داد. برای مثال افزودن اعتبار سنجی، ماسک ها برای ورودی ها و دیگر راهنمایی های بصری و اینها فقط ظاهر کار هستند. هدف اصلی این است که فرم ها را جذاب کرده و استفاده از آنها را ساده تر کنیم. در زیر به ۱۰ ابزار رایگان که می توانید از آنها برای عالی کردن فرم های تان استفاده کنید اشاره خواهم کرد.

html

formbase

formbase یک بسته است که از CSS/SASS به منظور بهبود استایل پیش فرض فرم ها استفاده می کند. این استایل ها cross-browser بوده و برای تجربه کاربری بهتر استفاده می شود.

form-enhancement-tools-04

Foxholder

Foxholder مجموعه ای از 15 انیمیشن placeholder برای تقویت فرم‌های شماست. وقتی کاربری با این input های شما ارتباط برقرار می کند، یک انیمیشن اجرا می شود. این یک روش عالی برای این است که کاربران شما بدانند دقیقا در کجای فرم ها قرار گرفتند.

form-enhancement-tools

dirrty

dirrty یک پلاگین jQuery است که می‌توان زمانی که یک فیلد از یک فرم تغییر می‌کند را تشخیص دهد. وقتی تغییری شناسایی شود از کاربر خواسته خواهد شد که تغییرات را ذخیره سازی کند.

form-enhancement-tools-02

Inputmask

 ورود داده هایی مانند فیلدهای تاریخ، تلفن های تماس و مقادیر پولی می تواند به راحتی با استفاده از Inputmask انجام بپذیرد. زمانی که یک کاربر با فیلد تعریف شده ارتباط برقرار می‌کند، ماسکی در فیلد قرار می‌گیرد و فرمت دقیق داده ی درخواستی را به کاربر نشان می‌دهد. نه تنها این کار به کاربران فرمت و شکل داده ورودی را نشان می دهد بلکه تضمین می کند که داده های ورودی صحیح هستند.

m-enhancement-tool

jQuery Validation Plugin

jQuery Validation Plugin ابزاریست که به سرعت می توان به کمک آن داده های فرم را اعتبارسنجی کرد. این ابزار حتی برای Url ها و ایمیل ها هم استفاده می شود. این ابزار دارای API هایی هست که به کاربران اجازه می دهد اعتبارسنجی مورد نظر خود را بنویسند.

form-enhancement-tools-05

dependsOn

وابستگی های مربوط به یک فیلد برای زمانی مناسب است که کاربر باید تنها فیلد هایی که مربوط به او است را مشاهده کند. این وابستگی ها همچنین می توانند ابزار اعتبارسنجی باشند. dependsOn یک پلاگین جی کوئری است که به شما اجازه میدهد وابستگی ها را به فرم تان اضافه کنید.

form-enhancement-tools-07

Choices.js

با استفاده از Choices.js می توانید select box های جذاب و ویژگی های زیبا را به فیلد های متنی در فرم خود اضافه کنید. این کتابخانه سبک وزن بوده و با استفاده از آن میتوانید قالب شخصی خود را برای input مورد نظر اعمال کنید.

form-enhancement-tools-08

Cascading Drop-Down Menu

Cascading Drop-Down Menu یک راه حل عالی برای زمانی است که نیاز به فرمی دارید که در آن کاربر باید گام‌های متعددی را انتخاب کند. برای مثال در مورد انتخاب یک اتومبیل فکر کنید. شما می توانید مدل آن و سپس سال ساخت و غیره را یکی پس از دیگری انتخاب کنید.

form-enhancement-tools-09

Multipicker

Multipicker روشی بصری را برای کاربران به منظور انتخاب چند گزینه (شبیه به checkbox) و یا انتخاب یک گزینه (شبیه به radio button) در یک لیست فراهم می آورد که با استفاده از عناصر html همچون لیست های غیر ترتیبی می تواند استفاده شود.

jQuery Form Plugin

بروز رسانی فرم های استاندارد html برای استفاده از ایجکس می‌تواند با استفاده از پلاگین jQuery Form Plugin انجام بپذیرد. این پلاگین دارای ویژگی های زیادی است که کنترل کاملی در مورد نحوه ارسال اطلاعات به سمت سرور به شما ارائه خواهد داد.

منبع: لرن سورس


شهربانو دوستی
۲۸تیر

آیا هنوز از PNG ها برای آیکون و لوگو در طراحی سایت استفاده می کنید. زمانش رسیده است که در مورد SVG ها بدانید. در حالی که بعضی از طراحان هنوز از روش های قدیمی تر استفاده می کنند، اما اکنون SVG ها در اکثر مرورگرها و دستگاه ها پشتیبانی می شوند. فایل های SVG فوق العاده کوچک، قابل جستجو، قابل تغییر(از طریق کد) و مقیاس پذیر هستند. آنها در تمام اندازه ها عالی هستند.

svg-compressor

SVG ها میتوانند همچون تصاویر در صفحات HTML شما استفاده شود. اگر هنوز از PNG ها برای لوگوها، آیکون ها و عناصر تعاملی در سایتتان استفاده می‌کنید، زمانش رسیده است تا با SVG ها بروزتر شوید. در این مقاله تمام مواردی که در این باره نیاز دارید آورده شده است. به طور خاص در این مقاله در مورد مبانی SVG صحبت می‌کنیم. در مقالات بعدی به جزئیات بیشتری در مورد نحوه استفاده از آنها خواهیم پرداخت.

چرا از SVG ها استفاده می کنیم؟

svg

همانطور که در بالا مشاهده میکنید تصویر سمت راست از کیفیت بالاتری برخوردار است. در واقع SVG ها با تغییر اندازه از کیفیت شان کاسته نمی شود. احتمالا دوست دارید از آنها در طراحی تان استفاده کنید. دلایل زیادی وجود دارد که از آنها کمک می گیریم.

مقیاس پذیری عالی در پیکسل ها

وقتی از تصاویر PNG استفاده می کنید این یعنی خودتان را به پیکسل ها محدود کرده اید و به عبارت دیگر این یعنی شما باید برای  هر دستگاه در هر اندازه از نسخه‌های متفاوتی  از تصویر در مقیاس های مختلف استفاده کنید. مزیت SVG ها در این است که رزولوشن بر روی آنها اثرگذار نیست. تصاویر SVG مقیاس پذیر هستند و همیشه عالی به نظر می رسد، زیرا آنها با استفاده از کدها طراحی می‌شوند نه پیکسل ها.

قابلیت تغییر

SVG ها می توانند با استفاده از CSS استایل بندی و یا متحرک سازی شوند. شما میتوانید رنگ ها، اندازه ها و فونت ها را در آنها تغییر دهید. عناصر در SVG ها می توانند واکنش گرا باشند. انیمیشن هایی که بر روی عناصر html استفاده می‌کنید می توانند بر روی عناصر SVG استفاده شوند.

اندازه کوچک فایل

PNG ها خیلی سریع می توانند بزرگ شوند، به خصوص زمانی که شما نیاز به اندازه های بزرگتری از آنها دارید. با بزرگ شدن تصویر در نتیجه حجم تصویر نیز افزایش می‌یابد و زمان بیشتری نیاز است تا در مرورگر بارگذاری شود. JPG ها بهتر هستند ولی همچنان بزرگ هستند و این یعنی سایتی با سرعت بارگذاری آهسته تر. SVG ها فقط کد هستند و این یعنی دارای اندازه بسیار کوچکی هستند. از آنها برای آیکون ها، لوگو ها و یا هر چیز دیگری که می تواند به عنوان یک vector ساخته شود استفاده کنید.

دسترسی پذیری

فایل های SVG بر مبنای متن هستند و می توان جستجو و ایندکس شوند. این یعنی آنها توسط صفحه خوان ها، موتور های جستجو و دیگر دستگاه ها قابل خواندن هستند. هر عنصری داخل SVG برای جستجو و تغییر فایل قابل دسترس است.

کجاها از SVG استفاده می شود؟

SVG ها هنوز به شدت مورد استفاده قرار نگرفتند. بخشی از آن به این دلیل است که برای رسیدن به پشتیبانی گسترده در مرورگرها زمان زیادی طول کشید. با این حال اگر شما به تجربه ای سریع و واکنش گرا نیاز دارید، SVG ها می توانند به طور قابل ملاحظه ای وب سایت شما را بهبود ببخشند. برخی از مواردی که می توانید از SVG ها استفاده کنید عبارتند از :

لوگو ها و آیکون ها

لوگو ها و آیکون ها اغلب نیاز به اشتراک گذاری و استفاده در اندازه های مختلف دارند. حتی اگر آیکون و یا لوگو یک دکمه ساده و یا یک بنر تبلیغاتی بزرگ در بر روی صفحه نمایش باشد، شما نیاز دارید آنها سازگار و واضح باشند. SVG امکان کنترل دقیق هر شکل، خط و عنصر را فراهم می آورد. آیکون ها و لوگو های SVG در دسترس تر هستند و این یعنی جاگذاری و دستکاری آنها در هر زمان آسانتر است.

نمودارها و اینفوگرافیک

SVG ها را می توان به صورت پویا بر اساس اقدامات کاربر و سایر حوادث به منظور ترسیم داده ها به روز رسانی کرد. این باعث می شود که SVG برای مواردی مانند نقشه های تعاملی و تصاویری که داده ها را توضیح میدهد مناسب باشند.

جلوه های بصری

بسیاری از جلوه‌های بصری می‌توانند با استفاده از SVG ایجاد شوند. برای مثال شکل‌گیری تصویر و یا انتقال از یک شکل به شکلی دیگر. می‌توانید حروف را به اشکال، لوگوها را به لوگوهای دیگر و غیره تبدیل کنید.

تصاویر متحرک

SVG ها می توانند با انیمیشن های CSS کار کنند، بنابراین شما نیاز ندارید مهارت های تازه ای را در زمینه انیمیشن یاد بگیرید. SVG ها می توانند از قابلیت انیمیشن درونی خود(SMIL) استفاده کنند.  این برای زمانی که می خواهید نتایج خلاقانه‌ ای را ایجاد کنید بسیار مفید است.

تصاویر سنتی

بسیاری از تصاویر سنتی به خوبی به SVG تبدیل می شوند در صورتی که خیلی پیچیده نیستند. طرح ها و نمودارها برای توضیح ویژگی های یک محصول و یا نشان دادن یک مفهوم می‌توانند عالی باشند.

رابط های کاربری و برنامه ها

SVG ها برای رابط های کاربری پیچیده ایده‌آل هستند. آنها می توانند با برنامه مبتنی بر وب و برنامه های کاربردی یکپارچه شود. آنها سبک هستند و به راحتی متحرک سازی می‌شود.

منبع: لرن سورس

شهربانو دوستی
۲۸تیر

چطور از تئوری رنگ ها برای ساخت یک پالت رنگی مناسب استفاده کنیم؟ در حالی که گام های بسیاری برای ایجاد یک وب سایت وجود دارد، نام تجاری یکی از مهمترین این گام‌ها است. چه شما برای یک شرکت کار می‌کنید و چه یک فریلنسر آزاد هستید، انتخاب یک پالت رنگی قابل درک و مناسب حیاتی است.این کار شاید کمی سخت به نظر برسد. ولی نگران نباشید.

Color Samples

در این مقاله توصیه هایی را بیان می‌کنم که به شما در انتخاب پالت رنگی مناسب کمک می‌کند. این توصیه ها با استفاده از مطالعات روانشناسی و نظریه رنگها بیان خواهد شد.

احساساتی که رنگها باعث برانگیخته شدن آنها میشود

ممکن است ایده ای در مورد پالت رنگی مورد علاقه برای کسب و کارتان داشته باشید اما قبل از اینکه هر کدام از پالت های رنگی را امتحان کنید، سعی کنید بدانید معنای هر کدام از رنگ هایی که می خواهید استفاده کنید چیست؟ این به معنای این است که از خود بپرسید آیا این رنگ ها احساسات درستی را ایجاد می‌کنند و برای بازار هدف من جذاب هستند؟

pallet

این سوال ممکن است کمی احمقانه به نظر برسد اما با نگاهی به روانشناسی و نظریه رنگ ها می‌توانید دید خوبی در این مورد به دست آورد. در مورد لوگوی برخی شرکت‌هایی بزرگ مانند کوکاکولا، فیسبوک و اپل فکر کنید. آنها سه برند باورنکردنی و معتبر هستند. همه آنها از رنگ های سفید آبی و قرمز در لوگوی خود استفاده کردند.

در حالی که انتخاب رنگ برای این لوگوها تجاری ممکن است خیلی معمولی به نظر برسد، اما باید بدانید که ساعت های زیادی برای آن فکر شده است. رنگ هایی که در لوگو های این شرکت ها استفاده شده اند، چیزی هستند که برایشان اهمیت دارد و یا حداقل چیزی است که برای رسیدن به آن تلاش می کند. اگر این مورد برای شما کمی گیج کننده است بهترین مکان برای شروع استفاده از ابزارهای آنلاین رنگی است. تعداد زیادی از آنها وجود دارد که می توانید بسته به علاقه خود از آنها استفاده کنید.

رنگ های غالب(اصلی) خود را انتخاب کنید

در ابتدا باید رنگهای اصلی و غالب خود را انتخاب کنید. این ها رنگ هایی هستند که کاربرانتان شما را با آن ها می‌شناسند. رنگ های غالب حتی در کارت های ویزیتی که برای کسب و کارتان درست می‌کنید، نقش اساسی دارند. اگرچه ضروری نیست به احتمال زیاد شما دو رنگ غالب را خواهید داشت. به طوری که دیگر رنگها به عنوان رنگ های برجسته و ثانویه در کنار آنها استفاده می‌شوند. البته مهم است که بدانید از دو رنگ غالب شما یکی بیشتر از دیگری در موارد تبلیغاتی، بنر و یا هر چیز دیگری استفاده می شود.

color

اول و مهمتر از همه این است که رنگ های غالب شما باید همدیگر را تکمیل کنند و یا با هم هماهنگ باشند و نه اینکه یکی دیگری را از معرض نمایش خارج بکند. با انجام این کار می توانید یک تعادل عالی بین دو رنگ قالب خود ایجاد کنید. این گام مهمی است. در این صورت است که از زمانی که برای انتخاب رنگ ها صرف کرده اید راضی خواهید بود.

رنگ های برجسته خود را انتخاب کنید

رنگ های برجسته نقش مهمی را در این میان ایفا می‌کنند. آنها باید چشمان بیننده شما را به چیزی که می خواهید برجسته تر باشد، جلب کنند. یک انتخاب ضعیف می تواند باعث شود کاربرانتان را از دست بدهید. رنگ های برجسته معمولا جسورتر از رنگهای غالب هستند. برای وب سایتتان رنگ های برجسته معمولا برای navigation menu و دیگر مواردی که می خواهید به نمایش گذاشته شود استفاده می شود.

color

استفاده از رنگ های برجسته در این بخش ها باعث ورود بیشتر کاربران به صفحات مورد نظر و درنتیجه خرید بیشتر خواهد شد.

قانون 60-30-10 را اعمال کنید

زمانی که پالت رنگی خود را تکمیل کردید هنوز کار به اتمام نرسیده است. هموز شما نمی دانید چطور این رنگ ها را با هم ترکیب کنید. در این مورد یک قانون مشهور وجود دارد. قانون 60-30-10. این قانون یعنی :

  • ۶۰ درصد از رنگ غالب استفاده کنید
  • ۳۰ درصد از رنگهای ثانویه استفاده کنید
  • ۱۰ درصد از رنگهای برجسته استفاده کنید

color

یک راه خوب برای به خاطر سپردن این قانون این است که مردی با کت و شلوار تجاری را در نظر بگیرید. ۶۰ درصد از لباس او، کت و شلوار اوست، که دارای رنگی مشخص است. پیراهن او ۳۰ درصد از لباس او را تشکیل می دهد و در نهایت کراوات او که 10 درصد نهایی را پوشش میدهد.

منبع: لرن سورس

شهربانو دوستی
۲۸تیر

آیا دوست دارید کد نویسی را یاد بگیرید. این مقاله با مجموعه ای از تکنولوژی‌ها و منابع به شما کمک می کند تا روش یادگیری کد نویسی برای ساخت وب سایت های مدرن، سریع و جذاب را به دست آورید. من سه ماه گذشته را به یادگیری کد نویسی پرداختم.

programming

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

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

البته یادگیری با تسلط کامل داشتن بر چیزی تفاوت دارد. با این حال شما الزامی ندارید که این کار را در سه ماه انجام دهید. در زیر مجموعه ای از نکات و تجربیاتی را که در این مدت یاد گرفته‌ام را در اختیار شما می‌گذارم که می‌تواند برای شما بسیار مفید باشد.

بخش اول : CSS , HTML و JavaScript

این ها سه زبان اصلی برای هر وب اپلیکیشنی هستند و تقریبا ساختن وبسایتی بدون آنها غیرممکن است.

HTML

اگر قبلا کد نویسی انجام نداده اید، html بهترین زبان برای شروع است. این زبان هسته ای بلوک های سازنده اینترنت است و برخلاف دیگر زبان‌ها بازخورد بصری فوری را برای  یادگیرندگانش فراهم می آورد. قبل از اینکه وارد مباحث یادگیری کدنویسی شوم، به صورت پراکنده قسمت های مختلف این زبان را دنبال می کردم.

html

به همین دلیل تا حدود زیادی با این زبان آشنا هستم. با این حال اگر بخواهیم یک منبع کامل را برای یادگیری این زبان انتخاب کنیم، سایت w3schools انتخاب مناسبی خواهد بود. این وب سایت خیلی ساده به عناصر html پرداخته است(ترجمه بیشتر مقالات زبان HTML این سایت در اینجا در دسترس است). اگر به دنبال محیطی برای تمرین کردن با این زبان میگردید، من به شما CodePen را پیشنهاد می کنم که یک ویرایشگر کد فوق العاده برای زبان های CSS , HTML و JavaScript به شمار می رود.

CSS

زبان CSS یک همراه و همدم برای زبان html محسوب می شود. این زبان بسیار ساده است، اگرچه دارای برخی مفاهیم خاص است (به خصوص مفاهیمی که مربوط به چیدمان و طرح بندی وب سایت می‌شود) که زمان بیشتری برای یادگیری نیاز دارد. باز یک منبع خوب برای یادگیری این زبان سایت w3schools است که ترجمه مقالات CSS آن در اینجا موجود است. من وقت زیادی را برای یادگیری زبان CSS اختصاص ندادم، زیرا قواعد نوشتاری این زبان بسیار ساده است. بنابراین بسیاری از مطالبی که در مورد این زبان یاد گرفتم مربوط به پروژه‌های بوده است که پیاده سازی کردم.

سخت ترین قسمت از زبان CSS فهم و درک layout است. سوالات زیادی در مورد layout در سایت StackOverflow پرسیده شده است که پاسخ آنها در همان سایت در دسترس است. سایت StackOverflow یک سایت پرسش و پاسخ فوق العاده بوده که پاسخ بسیاری از سوالات خود را می توانید در آن جستجو کنید. نسخه پیشرفته CSS و CSS3 نامیده می‌شود که ابزارهای طرح بندی قدرتمندی دارد و می‌تواند طراحی بهتری را برای ما به ارمغان بیاورد.

JavaScript

HTML و CSS زبان های برنامه نویسی کاملاً جامعی نیستند و تا زمانی که با آنها کار می‌کنید نمی‌توانید احساس کار با یک زبان برنامه نویسی را داشته باشید. اما زبان جاوااسکریپت یک زبان برنامه نویسی برای وب است و به همین دلیل است که جاوا اسکریپت انتخاب امن و فوق العاده برای یادگیری است. به علاوه این زبان به طور فزاینده ای برای اهداف دیگر از طریق فناوری های مانند Node.js استفاده می شود.

javascript

برای افراد مبتدی جاوا اسکریپ همچون css و html ساده نیست و من به شما پیشنهاد می کنم از منابع مختلفی برای یادگیری مفاهیم این زبان در سطوح مختلف استفاده کنید. برای شروع یادگیری زبان جاوا اسکریپت پیشنهاد من به شما همچنان سایت w3schools است که برخی مقالات آن در سایت لرن سورس ترجمه شده است و می تواند شروع خوبی برای یادگیری باشد.

 زمانی که در یادگیری جاوا اسکریپت کمی پیشرفت کردید می‌توانید مسائل خود را در https://codewars.com تکمیل کنید. CodeWars فوق العاده است اما مسائل آن دارای درجه بندی مختلفی هستند و برخی از آنها برای افراد مبتدی بسیار سخت و دشوار است.

بخش دوم : قسمت های ضروری دیگر که هر توسعه دهنده‌ی باید بداند

گیت و گیت هاب

گیت چیزی است که با نام “version-control system” شناخته میشود و گیت‌هاب مشهور ترین سرویس cloud-based گیت است. به زبان ساده تر گیت به شما اجازه می‌دهد از فایلتان بکاپ بگیرید، تغییرات را ردیابی کنید، پیشرفت های خود را با دیگر توسعه دهندگان به اشتراک بگذارید و در پروژه های تیمی همکاری کنید.

اکثر قریب به اتفاق توسعه‌دهندگان حرفه‌ای به سرویس‌های همچون گیت‌هاب تکیه دارند و داشتن پروفایل در چنین سرویس‌هایی می‌تواند کار آنها را امن‌تر نگه دارد.

 git

هرچه سریعتر کار خود را در گیت هاب شروع کنید، شانس بیشتری برای شناخته شدن به عنوان یک توسعه دهنده با تجربه دارید. می توانید از آموزش های Codecademy’s Git Tutorial برای شروع کار با گیت هاب استفاده کنید.

Command Line

بهترین روش برای استفاده از گیت بهره بردن از “terminal” و یا “command line” است که البته برای توسعه دهندگان مدرن وب امری ضروری است و به آنها اجازه می‌دهد به آسانی پکیجی را از طریق NPM در وبسایت خود نصب کنند.

بخش سوم : مجموعه مهارتهای خود را بسازید

زمانی که دانش کار با زبان های html ، css و جاوااسکریپت را داشته باشید، انتخاب تکنولوژی هایی که میتوانید یاد بگیرید کمی گیج کننده خواهد بود. با این حال برای توسعه دهندگان وب پیشنهادات من در زیر آمده است :

Sass

Sass یک پیش پردازنده برای CSS است. این پیش پردازنده از CSS پایه استفاده میکند و قابلیت های جدیدی را به آن اضافه می کند که کد نویسی آن را ساده تر و بهتر کرده و نگهداری از کدها را آسان تر می کند. یادگیری این پیش پردازنده بسیار آسان است و فقط کافیست که آموزش‌های رسمی این پیش پردازنده را دنبال کنید. زمانی که استفاده از Sass را شروع کردم دیگر برگشت به CSS معمولی برایم واقعا سخت بود.

بوت استرپ

بوت استرپ کتابخانه ای از کامپوننت هاست که به وسیله توییتر توسعه داده شده است. این کتابخانه به توسعه‌دهندگان اجازه می دهد قالب وب سایت خود را خیلی سریع طراحی کنند. به جای کدنویسی قابلیت هایی مثل اسلایدر، navbar و accordion بوت استرپ به شما اجازه می دهد در چند ثانیه آنها را ایجاد کنید.

همچون پیش پردازنده Sass زمان زیادی برای یادگیری مبانی اصلی کتابخانه بوت استرپ لازم نیست. من به شما پیشنهاد می کنم که بوت استرپ را یاد بگیرید زیرا به شما کمک می کند یک پروژه را به سرعت راه اندازی کنید.

bootstrap

این کتابخانه به خصوص در زمانی که یک پروژه عملی را برای یادگیری تکنولوژی دیگری راه اندازی کرده اید بسیار مفید است و لازم نیست وقت زیادی را برای طراحی ظاهری سایت خود صرف کنید. با وجود مزایای بی شمار بوت استرپ من به عنوان یک توسعه دهنده به شدت بر روی این کتابخانه تکیه نمیکنم زیرا شما می توانید با طراحی کامپوننت های مختلف همچون accordion مطالب زیادی را یاد بگیرید.

جی کوئری

سال ۲۰۱۹ ممکن است به نقطه عطفی برای جی کوئری تبدیل شود زیرا تعداد زیادی از توسعه دهندگان به سمت فریم ورک هایی مانند  React.js و Vue.js تمایل پیدا کردند. این در حالی است که ویرایش DOM توسط جی کوئری که قبلا بسیار ارزشمند تلقی می‌شد اکنون به یک عمل بد تبدیل شده است.

jquery

با این حال توصیه من به شما این است که همچنان جی کوئری را یاد بگیرید، نه تنها هنوز بخش بزرگی از وب سایت های اینترنت از این کتابخانه استفاده می کنند بلکه یادگیری این کتابخانه باعث می شود دانش توسعه در جاوا اسکریپ را برای خودتان تمرین کنید. برای من بهترین مکان برای یادگیری جاوا اسکریپت سایت رسمی آن است. یادگیری کتابخانه جی کوئری قبل از ورود به تکنولوژی‌های مدرن می تواند برای شما بسیار مفید باشد.

React

تعداد زیادی کتابخانه مدرن برای جاوا اسکریپت به وجود آمده است برای مثال Ember ، React ، Vue و آنگولار. اینجا انتخاب تنهایی وجود ندارد. اما بعد از کمی تحقیق تصمیم گرفتم که بر روی React تمرکز کنم. در میان همه این فریمورک ها و کتابخانه‌ها به نظر React مشهور تر بوده و سریعا در حال رشد است. این فریمورک توسط فیسبوک توسعه یافته است و روش آن در تغییر و ویرایش DOM مزیتی است که آن را نسبت به آنگولار برتری داده است.

react

من واقعا React را دوست دارم. یادگیری این فریمورک از جی کوئری سخت تر است و زمان بیشتری طول می کشد آن را بنویسید. اما مزایای آن حتی در پروژه های شخصی و کوچک نیز نمایان است. طبیعت ماژولار بودن React استفاده از state و سرعت بالای آن استفاده از این فریم ورک را به شدت لذت بخش کرده است. بهترین منبع برای یادگیری این فریمورک آموزش های اصلی خود آن است. 

منبع: لرن سورس
شهربانو دوستی
۲۷تیر

Node.js یک محیط زمان اجرای جاوا اسکریپت است که به نظر عالی می رسد.اما واقعا این به چه معناست و چطور کار میکند؟ محیط زمان اجرای Node شامل هر چیزی است که شما برای اجرای یک برنامه به زبان جاوا اسکریپت به آن نیاز دارید.

nodejs

Node.js از زمانی وجود داشت که کاربران اولیه جاوا اسکریپت آن را از حالتی که فقط بر روی یک مرورگر اجرا می‌شد به حالتی که بر روی کامپیوتر شما همچون یک برنامه مستقل کار می‌کند، گسترش دادند. اکنون میتوانید با استفاده از جاوااسکریپت کارهای بیشتری فراتر از طراحی سایت های تعاملی انجام دهید. اکنون جاوا اسکریپت توانایی انجام کارهایی را دارد که زبان هایی همچون پایتون می توانند انجام دهند.

node

هردوی جاوا اسکریپت مرورگر و Node.js بر روی موتور زمان اجرای V8 جاوااسکریپت اجرا می‌شوند. این موتور اجرا، کد جاوا اسکریپت شما را گرفته و به کدهای سریع ماشین تبدیل می‌کند. کدهای ماشین کدهای سطح پایینی هستند که کامپیوتر ها بدون اینکه نیاز به تفسیر آنها داشته باشند، آنها را اجرا می‌کنند.

چرا Node.js؟

در زیر تعریف رسمی از Node.js که در سایت آن منتشر شده است، آورده شده است :

  • Node.js یک زمان اجرای جاوااسکریپت است که بر روی Chrome’s V8 JavaScript engine ساخته شده است.
  • Node.js از مدل event-driven و non-blocking I/O که آن را سبک و کاراتر کرده است، استفاده میکند.
  • اکو سیستم پکیج Node.js یعنی همان npm ، بزرگترین اکوسیسیتم کتابخانه ای سورس باز جهان است.

قبلاً در مورد خط اول آیتم های بالا یعنی تعریف Node.js صحبت کرده ایم. اکنون بیایید ببینیم دو خط بعدی که در تعریف رسمی این سایت به آن اشاره شده است، چرا تا این حد این محیط اجرا را محبوب کرده است.

I/O اشاره به input/output (ورودی و خروجی) دارد و می تواند هر چیزی در گستره خواندن و نوشتن فایل های محلی تا ارسال یک درخواست HTTP به یک API را در بربگیرد. I/O مدت زمانی را صرف می کند و از این رو دیگر توابع در این مدت محدود می‌شوند.

سناریویی را در نظر بگیرید که ما درخواستی را برای به دست آوردن اطلاعات دو کاربر user1 و user2 به سمت دیتابیس ارسال کرده ایم و قرار است بعد از به دست آمدن اطلاعات، آنها را بر روی صفحه نمایش و یا صفحه کنسول نمایش دهیم.

پاسخ به این درخواست ها مدت زمانی را به خود اختصاص خواهد داد. اما هردو درخواستی که برای این کاربران داده شده است می‌توانند مستقل از همدیگر و در یک زمان انجام شوند.

node

Blocking I/O

در حالت Blocking I/O درخواست ارسالی کاربر دوم تا زمانی که اطلاعات کاربر اول بر روی صفحه چاپ نشود، اجرا نمی شود. اگر این یک وب سرور بود می‌توانستیم یک thread جدید را برای هر کاربر آغاز کنیم اما جاوااسکریپت single-threaded است (البته به به معنای واقعی اما دارای یک چرخه رویداد single-threaded است)

با همه این اوصاف جاوااسکریپت زبان مناسبی برای انجام وظایف multi-threaded نیست. در اینجاست که قابلیت non-blocking به کمک ما می آید.

Non-blocking I/O

به عبارت دیگر با استفاده از درخواست های Non-blocking I/O میتوانید درخواست کاربر دوم را اجرا کنید بدون اینکه لازم باشد منتظر پاسخ درخواست کاربر اول باشید. در واقع شما میتوانید این دو درخواست را به صورت موازی اجرا کنید. قابلیت Non-blocking I/O نیاز به multi-threading را کاهش داده است زیرا سرور می تواند چندین درخواست را در یک زمان مدیریت کند.

npm

npm

npm کتابخانه هایی هستند که به وسیله عموم ساخته شده اند که می تواند اکثر مشکلات عمومی شما را حل کند. npm و یا به عبارتی دیگر Node package manager دارای بسته هایی هست که می توانید از آنها در برنامه های خود به منظور توسعه سریعتر بهره ببرید.

ماژول های Node

ماژول Node بلوکی است که قابلیت استفاده مجدد را دارد و وجودش بر روی دیگر کدها اثری نمی‌گذارد. شما می توانید ماژول مورد علاقه خود را بنویسید و از آن در برنامه‌های مختلف استفاده کنید. Node.js دارای مجموعه ای از ماژول های built-in است که از آنها بدون نیاز به راه اندازی اولیه می توان استفاده کرد.

V8

V8 یک موتور زمان اجرای سورس باز است که با استفاده از ++C نوشته شده است. جاوااسکریپت ابتدا به V8 تبدیل شده و در نهایت به کد ماشین مبدل می شود. V8 اسکریپتی به نام ECMAScript را پیاده سازی می کند. ECMAScript به وسیله Ecma International به منظور استاندارد کردن جاوااسکریپت پدید آمد.

V8 می تواند به تنهایی اجرا شود و یا داخل هر برنامه ای به زبان ++C قرار بگیرد. V8 دارای قابلیت هایی است که به شما اجازه نوشتن کدهای از ++C را میدهد که می‌توانید آنها را در جاوا اسکریپت داشته باشید. مخصوصا شما اجازه دارید ویژگی‌هایی را با قرار دادن V8 داخل کد ++C به جاوا اسکریپت اضافه کنید.

رویدادها

چیز هایی که در برنامه‌های ما اتفاق می افتند و ما می‌توانیم به آنها پاسخ دهیم رویداد نامیده می‌شوند. در Node دو نوع رویداد داریم :

  • رویداد های سیستمی که مروبط به هسته ++C هستند. برای مثال اتمام خواندن یک فایل.
  • رویداد های Custom که مربوط به هسته جاوا اسکریپت هستند.

نوشتن برنامه Hello World در Node.js

بیاید به منظور آشنایی بیشتر با Node.js برنامه Hello World را پیاده سازی کنیم. فایلی به نام app.js را ایجاد کرده و کد زیر را در آن قرار دهید :

console.log("Hello World!");

ترمینال node خود را باز کرده و دایرکتوری خود را به جایی که فایل بالا در آن ذخیره شده است تغییر دهید و سپس دستور node app.js را اجرا کنید. به همین سادگی برنامه Hello World را نوشته و اجرا کردید.

در انتها باید بگویم منابع زیادی در اینترنت برای یادگیری Node.js وجود دارد که می‌توانید برای پیشرفت خود به آنها رجوع کنید.

منبع: لرن سورس
شهربانو دوستی
۲۷تیر

در این مقاله به معرفی سریع کتابخانه محبوب جاوااسکریپت یعنی React.js می پردازیم. این آموزش برای شما درک پایه ای را از React.js با ساخت یک اپلیکیشن ساده فراهم می آورد. در این آموزش سعی شده است دیدی کلی از این فریمورک به شما داده شود. پس بیایید هر چه زودتر کار را شروع کنیم.

reactjs

راه اندازی(setup)

زمانی که با React.js شروع به کار می کنید باید از ساده‌ترین راه‌اندازی ممکن استفاده کنید: یک فایل HTML ساده که از کتابخانه های React و ReactDOM با استفاده از تگ های script استفاده میکند، مانند مثال زیر :

<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"> </script><script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js">
</script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
    
    /* 
    ADD REACT CODE HERE 
    */
    
    </script>
</body>
</html>

ما همچنین Babel را نیز به صفحه اضافه کرده ایم، زیرا React از چیزی به نام JSX برای نوشتن markup استفاده می‌کند. نیاز داریم این  JSX را به کد ساده ی جاوا اسکریپت تبدیل کنیم تا در این صورت مرورگر بتواند آن را درک کند.

دو مورد دیگر هم وجود دارد که می خواهم به آنها توجه کنید :

  1. تگ <div> به همراه مشخصه Id که با مقدارroot# تنظیم شده است. این قسمت نقطه ورود به برنامه ماست. اینجا دقیقا مکانی است که اپلیکیشن ما شروع به کار می کند.
  2. تگ <script type="text/babel"> در بدنه برنامه استفاده شده است. اینجا مکانی ست که قرار است کد های React.js را بنویسیم.

کامپوننت ها

هر چیزی در React.js یک کامپوننت است و اینها معمولا به شکل کلاس هایی از جاوا اسکریپت نمایش داده میشوند. میتوانید یک کامپوننت را با extend کردن از کلاس React-Component ایجاد کنید. اجازه بدهید کامپوننت ساده ایی به نام Hello را ایجاد کنیم :

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

شما سپس باید متدهایی را برای این کامپوننت تعریف کنید. در مثال ما تنها یک متد داریم که ()render نامیده شده است. داخل متد ()render توضیحی را که می خواهید بر روی صفحه نمایش نشان داده شود، قرار می‌دهید. در نمونه مثال بالا میخواهیم یک تگ h1 با متن Hello world! در صفحه نمایان شود.

به منظور اینکه اپلیکیشن ساده ما عنصر مورد نظر را بر روی صفحه نمایش رندر کند، باید از ()ReactDOM.render استفاده کنید :

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

بنابراین در اینجا کامپوننت Hello را به نقطه ورود برنامه خود یعنی <div id="root"></div> متصل می کنیم. نتیجه چنین کاری در شکل زیر نشان داده شده است :

react

قاعده نوشتاری شبیه به HTML ایی(<h1> و <Hello/>) که دیدید کد JSX نام دارد که قبلا در موردش صحبت کردیم.این کد در واقع html نیست اما هرچه در این قسمت بنویسید در نهایت به کدهای html در صفحه رندر خواهد شد. قدم بعدی که باید به آن بپردازیم مدیریت داده هاست.

مدیریت داده ها

دو نوع داده در React وجود دارد : props و state. شناخت تفاوت این دو نیاز به توضیح دارد و شاید درک آن در ابتدا کمی سخت باشد. بنابراین اگر این بحث کمی گیج کننده بود نگران نباشید. خود من وقتی شروع به کار با آنها کردم تازه درک آنها برایم ساده تر شد.

اما تفاوت کلیدی این است که state خصوصی است و تنها داخل خود کامپوننت قابل تغییر است. Prop ها external و عمومی هستند و تنها به وسیله کامپوننت ها کنترل نمی شود و از نظر سلسله مراتب بالاتر از کامپوننت ها قرار دارند. یک کامپوننت می‌تواند state داخلی خود را به طور مستقیم تغییر دهد اما نمی تواند به طور مستقیم prop مربوط به خود را تغییر دهد.

ابتدا اجازه دهید نگاه دقیق‌تری به prop ها بیندازیم.

Props

کامپوننت Hello نوشته شده در مثال های قبل بسیار استاتیک است و پیغامی را فقط در خروجی نشان می دهد. بخش بزرگی از  React قابلیت استفاده مجدد آن است که به معنای توانایی برای نوشتن کامپوننتی است که می‌تواند در موارد مختلف مورد استفاده قرار بگیرد. برای مثال نمایش پیغام های مختلف.

برای رسیدن به این نوع از استفاده مجدد باید prop ها را به سمت یک کامپوننت ارسال کنید :

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

نام prop به کار برده شده در مثال بالا message است که دارای مقدار “my friend” است. ما می‌توانیم به این prop در کامپوننت Hello با ارجاع به this.props.message به شکل زیر دسترسی داشته باشیم :

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

در نتیجه چیزی که در خروجی نمایش داده می شود به شکل زیر است :

react

دلیلی که ما از عبارت {this.props.message} به همراه {} استفاده می‌کنیم این است که نیاز است به JSX بگوییم می خواهیم یک عبارت جاوااسکریپتی را اضافه کنیم که escaping نامیده می‌شود. اکنون کامپوننتی با قابلیت استفاده مجدد داریم که می تواند هر پیغامی را که بخواهیم بر روی صفحه نمایش نشان دهد. با این حال اگر بخواهیم کامپوننت بتواند داده خود را تغییر دهد چه کاری میتوانیم انجام دهیم؟ در اینجا می توانیم از stateها استفاده کنیم.

State

روشی دیگر برای ذخیره سازی داده ها در فریمورک React استفاده از state های کامپوننت هاست. برخلاف prop ها که نمی توانند مستقیماً توسط کامپوننتها تغییر کنند، stateها می توانند به سادگی تغییر کنند. بنابراین  اگر بخواهید داده ها در برنامه شما تغییر کنند - برای مثال بر اساس تعاملات کاربر - باید داده ها را داخل state ذخیره کنید.

مقدار دهی state

برای تنظیم state به سادگی this.state را داخل متد ()constructor از کلاس مقدار دهی کنید. در مورد مثال ما state یک شی است که دارای یک کلیدی به نام message است :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

قبل از مقدار دهی state باید متد ()super را در سازنده فراخوانی کنید و این کار به خاطر کلمه this انجام می‌شود که قبل از ()super استفاده نشده است.

ویرایش state

برای ویرایش state به سادگی میتوانید ()this.setState را فراخوانی کنید و state جدید را به عنوان آرگومان برای آن ارسال کنید. ما این کار را داخل متدی که updateMessage نام دارد انجام داده ایم :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

برای اینکه این قابلیت به درستی کار کند کلمه کلیدی this را به متد updateMessage بایند کرده‌ایم. در غیر این صورت نمی توانیم به this در این متد دسترسی داشته باشیم.

قدم بعدی ساخت یک دکمه است که باید بر روی آن کلیک شود و در این صورت متد ()updateMessage را فراخوانی می کنیم. بنابراین بیایید دکمه ای را به تابع ()render خود اضافه  کنیم :

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

در اینجا ما یک event listener را به یک دکمه متصل کرده‌ایم و در این صورت وقتی رویداد کلیک رخ می‌دهد، متد updateMessage فراخوانی می‌شود. در زیر نمایی کلی از کامپوننتی که باهم نوشتیم آورده شده است :

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

متد ()updateMessage عبارت ()this.setState را فراخوانی می کند که مقدار this.state.message را تغییر می‌دهد. وقتی روی دکمه کلیک می کنید چیزی که نشان داده میشود به صورت زیر است :

react

تبریک می‌گوییم شما یک اپلیکیشن بسیار ساده را با مهمترین مفاهیم React پیاده سازی کردید. این فریمورک بسیار قدرتمند است و به سرعت در حال رشد است.

منبع: لرن سورس

شهربانو دوستی
۲۷تیر

وقتی برای مدتی شروع به کار با CSS می کنید، متوجه می شوید که در سازماندهی کدهای آن کمی مشکل دارید. CSS دارای یک روش سازماندهی ذاتی به نام Cascade است. در این روش چیزی که در ابتدا می نویسید بر هر چیزی که بعد از آن می آید تاثیر می‌گذارد که البته می توان همه آنها را در صورت لزوم override کرد.

css

با این وجود این روش، Cascade بر این باور است که شما در سال ۱۹۹۸ در حال ساخت یک وب سایت استاتیک کوچک در html هستید. اشتباه نکنید قابلیت Cascade همچنان مهم و قدرتمند است. فقط باید گفت که وبسایت های امروزی بسیار پیچیده تر شده اند. توسعه دهندگان Front-end اغلب برای یک پروژه شخصی نه چندان بزرگ هزاران خط کد CSS مینویسند.

سازماندهی کردن چنین حجمی از کد می تواند به همان اندازه که ساخت سیستم ها و اپلیکیشن ها اهمیت دارد، مهم و حیاتی باشد. هر ابزاری که استفاده میکنید نیاز به چیزی دارد. نوشتن یک stylesheet بزرگ برای یک صفحه وب ساده و حتی برای یک سایت بروشور پنج صفحه ای ممکن است مناسب باشد، ولی قطعاً برای کارهای پیچیده تر نمی‌توان همچنان از این روش استفاده کرد.

۱.از یک پیش پردازنده CSS استفاده کنید

اولین روش برای سازماندهی مناسب کدهای CSS استفاده از یک پیش پردازنده CSS است که به شما کمک می کند هر چیزی از استایل دهی صفحات را در یک فایل ذخیره سازی کنید. بله من جمله بالایی که در این مقاله به آن اشاره کردم را فراموش نکردم.

من گفتم قرار دادن تمام کد های CSS در یک فایل کار صحیحی نیست، اما باید بدانید زمانی که شما از فایل های مختلفی از CSS برای استایل دهی استفاده می‌کنید باید به لینک های بیشتری در صفحات html ارجاع دهید و از طرف دیگر مرورگر شما باید درخواست های http بیشتری را ایجاد کند که در نتیجه باعث کندی در بارگذاری وب سایت می‌شود. این فرآیند حداقل کار بیشتری را برای پردازنده به وجود می آورند.

قانون import@ در CSS معمولی نیز هم این مشکل را داراست. اما با استفاده از یک پیش پردازنده می توانید CSS خود را در چندین فایل و فولدر جداسازی کنید و در نهایت آنها را در یک فایل واحد کامپایل کنید. این روش بسیار عالی است، پیشنهاد من به شما استفاده از پیش پردازنده Sass است که در حال حاضر مشهورترین پیش پردازنده CSS محسوب میشود.

۲.فایل های جداگانه CSS برای صفحات منفرد

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

برای مثال زمانی که صفحه درباره ما را باز می کنید تنها از فایل about-page.css استفاده می شود و نیاز به تغییر در کدهای CSS نیست.

۳.فایل های جایگزین برای کامپوننت های پیچیده و تکراری

این روش برای سایت های کوچکتر و بزرگتر یکسان عمل می کند. اگر شما چیزی داشته باشید که پیچیده باشد برای مثال یک اسلاید شو در صفحه اصلی، باید برای آن فایل های CSS جداگانه ای را در نظر بگیرید. کد های CSS چنین کامپوننتی را به هیچ وجه در کدهای CSS صفحه اصلی خود قرار ندهید. این قانون برای هر عنصری که ممکن است در بیش از یک صفحه استفاده شود صدق می کند برای مثال هیدر، نوار منو، فوتر و گالری های تصویر.

این کار نه تنها به سازماندهی کدهای CSS شما کمک میکند بلکه اگر کد های مربوط به هر کامپوننت را مستقل از دیگر اجزا نگه دارید، استفاده مجدد از آنها بسیار ساده تر است.

۴.تقسیم بندی بیشتر

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

روشی که من به شما پیشنهاد می کنم Atomic Design نامیده می شود. این روش عناصر طراحی را به پنج دسته تقسیم بندی می کنند :

  • اتم ها
  • مولکول ها
  • مجموعه ها
  • قالب ها
  • صفحات

در این روش اتم ها همان عناصر منفرد همچون دکمه ها و فیلد های متنی و ... هستند. مولکول ها در این روش می توانند فرمی باشند که از ترکیب فیلد های متنی و دکمه ها به وجود آمده است. مجموعه ها بزرگتر بوده و  از اجتماع مولکول ها ایجاد می شود. مثالی از یک مجموعه می‌تواند هیدر یک وب سایت باشد.

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

این روش باعث به وجود آمدن فایل های CSS متعددی می‌شود اما مزیتش این است که سریع‌تر می‌توانید به کدی که می‌خواهید با آن کار کنید دسترسی پیدا کنید. 

۵.از CLASS-ITIS اجتناب کنید

CLASS-ITIS چیست؟ یک بیماری وحشتناک است که کاربر را مجبور به استفاده از class= attribute همچون یک style= attribute می کند. بعضی ها چنین بیماری را دارند. کد زیر مثالی از این بیماری است :

<div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div>

خیلی غم انگیز است. بدتر از همه اینکه این بیماری می‌تواند توسط برخی فریمورک های بزرگ CSS انتقال داده شود. دقت کنید مهم نیست چه مشخصه ای را استفاده می کنید اگر در حال نوشتن استایل ها در فایل های html خود هستید، کار اشتباهی را انجام میدهد. این کار غیر قابل تحمل است به خصوص زمانی که سایت ها بزرگتر می شوند.

۶.حداقل عمق

در اینجا می‌خواهم به روشی در CSS اشاره کنم که واقعا دوستش دارم : SMACSS . در این قسمت به مسئله ای می‌پردازیم که کاربرد حداقل عمق را نشان میدهد. حالا معنای این روش چیست؟ خوب به خاطر بیاورید که گفتم استفاده از کلاسهای متعدد کار صحیحی نیست. می توانیم شبیه همان قانون را در نوشتن کد های CSS پیاده سازی کنیم. این کار باعث می شود از نوشتن کد های تکراری پرهیز کنیم :

header nav ul, footer nav ul, aside div ul {margin-top: 1rem;}

کد بالا نه تنها می تواند حجم کدنویسی شما را افزایش دهد، بلکه به دلیل اختصاصی نبودن کد ها، می تواند قسمت های دیگر وبسایت را نیز تحت تاثیر قرار دهد زیرا مشخصه مورد نظر به جای کلاس بر روی تگ ها اعمال می شود. اما می توان کدهای بالا را به شکل زیر هم نوشت :

.molecule-nav {margin-top: 1rem;}

همانطور که در بالا میبینید کد نویسی ما تا حد زیادی کاهش یافته است.

منبع: لرن سورس

شهربانو دوستی
۲۷تیر

وسعه وب آنقدر پیچیده شده است که امروز بعضی از توسعه دهندگان وب برای ساخت اپلیکیشن های وب بر روی فریمورک ها تکیه دارند. فریمورک ها سرعت جریان توسعه را افزایش داده و شما را ملزم به انجام بهترین تمرینات می‌کنند. این فریمورک ها برای شما کدهای قابل نگهداری به همراه معماری موثر را فراهم می آورند. در این مقاله با 8 فریمورک فوق العاده جاوا اسکریپت که ممکن است در سال ۲۰۱۹ برای شما مفید باشد آشنا می شوید.

framework

اگرچه این مقاله به همه فریمورک های موثر در جاوا اسکریپت اشاره ای نخواهد داشت، اما می تواند نقطه شروع مناسبی برای آشنایی با فریمورک های جاوا اسکریپت و تصمیم برای انتخاب آنها باشد.

1.React

react.jpg

React یک فریمورک مشهور جاوا اسکریپت است که به وسیله فیس بوک ایجاد و توسعه یافته است. می توانید از این فریمورک به منظور ساخت رابط های کاربری جذاب برای اپلیکیشن های  single page استفاده کنید. React یک معماری component-based را برای توسعه دهندگان وب ارمغان آورده است که الگوی MVC قدیمی را به چالش کشیده است.

کامپوننت های React کپسول سازی شده و وضعیت خود را مدیریت می‌کنند. وقتی داده ای تغییر میکند React تنها کامپوننتی که تغییرات بر روی آن اثر می‌گذارد را به روز رسانی می کند. اکوسیستم بزرگی برای React وجود دارد که شامل مواد آموزشی، جامعه بزرگ و مشتاق توسعه دهندگان و ابزارهای مختلف می شود. شغل های زیادی برای توسعه دهندگان React وجود دارد. اگر می خواهید برای یادگیری یک فریمورک جاوا اسکریپت که آینده دار باشد، سرمایه‌گذاری کنید React ارزش وقت گذاری را دارد.

2.Vue.js

vue-js.jpg

Vue.js به ما اجازه ساخت اپلیکیشن های single page و کامپوننت های رابط کاربری را با استفاده از فریمورکی سبک و همه کاره میدهد. Vue.js ترقی خواه است و این بدان معناست که می توانید از آن به عنوان کتابخانه ای که ویژگی های بیشتری را به رابط کاربری می افزاید استفاده کرده و یا از آن به عنوان فریمورکی که برنامه شما را اجرا می‌کند استفاده کنید.

Vue.js مادام با React مقایسه می‌شود زیرا این فریمورک نیز می‌تواند صفحات وب را به کامپوننت های قابل استفاده مجدد تقسیم‌بندی کند. Vue.js از الگوی قاعده نوشتاری HTML مربوط به خود پیروی می کند که میتواند عناصر رندر شده را به داده های مربوطه باید کند. وقتی داده ای تغییر میکند Vue.js به صورت خودکار تمام نمونه ها را در HTML بروز رسانی می کند.

اگر چه React همچنان مشهور تر است اما Vue.js نیز به سرعت در حال رشد است. این فریمورک دارای منابع آموزشی مفیدی زیادی است.

3.Angular

angular-7.jpg

Angular یک فریم ورک جاوا اسکریپتی مبتنی بر TypeScript است که به وسیله گوگل توسعه داده شده و نگهداری می‌شود. نسخه های مختلف آنگولار کمی گیج کننده است. آنگولار نسخه ۲ از صفر آنگولار نسخه ۱ را بازنویسی کرده است. در حال حاضر این فریمورک به نسخه ۷ رسیده است.

در حالی که AngularJS بر پایه معماری MVC بود، +Angular2 بر پایه کامپوننت است. این دو از منطق های متفاوتی پیروی می‌کنند. اپلیکیشن‌های آنگولار نمی‌توانند به نسخه های ۲ و بالاتر به روز رسانی شود. با استفاده از آنگولار می‌توانید اپلیکیشن های single-page را برای هر پلتفرمی ایجاد کنید که می تواند شامل برنامه های وب، برنامه های موبایل، برنامه های بومی موبایل، برنامه های بومی دسکتاپ باشد.

اگر قبلا با زبان های همچون C# ، Java و ++C کارکرده اید، این فریمورک میتواند انتخاب مناسبی برای شما باشد. یادگیری این فریمورک به زمان بیشتری در مقایسه با فریمورک های Vue و React نیاز دارد. با این حال این فریمورک دارای اکوسیستم خیلی بزرگ و آینده شغلی روشنی است.

4.Next.js

next-js

Next.js یک فریمورک مینیمالیست جاوا اسکریپت است که امکان رندرینگ سمت سرور را در برنامه‌های React فراهم می آورد. به صورت پیش‌فرض React تمام محتوا را در سمت کاربر رندر می‌کند که باعث به وجود آمدن مشکلاتی میشود. اولا کاربر باید منتظر بماند تا تمام اسکریپت در مرورگر او بارگذاری شود ثانیا این مورد ممکن است باعث مشکلات سئو شود، زیرا موتورهای جستجو هنوز به خوبی نمی توانند اپلیکیشن های جاوا اسکریپ را ایندکس کند.

راه حل این مشکل رندر کردن محتوا در سمت سرور است(قبل از اینکه آن را به سمت مرورگر ارسال کنیم) و این کاری است که Next.js برای ما انجام میدهد. این فریمورک شامل ویژگی های فوق العاده همچون بارگیری مجدد کد، تقسیم خودکار کد و مسیریابی خودکار و ... است. اگر از Next به همراه React استفاده میکنید، سادگی Vue را با ویژگی‌های قدرتمند React ترکیب کرده اید.

اگر قبلاً از React استفاده کرده اید Next یک گام موثر برای تسلط بر توسعه اپلیکیشن های جاوا اسکریپت است. این فریمورک دارای آموزش های فوق العاده ای است که می تواند به شما کمک کنند یکی دو ساعته کار با این فریمورک را آغاز کنید.

5.Relay

relay-framework.jpg

Relay یک فریم ورک جاوا اسکریپتی دیگر است که به شما کمک می کند با برنامه های React بهتر کار کنید. درست همچون Relay ، React نیز توسط فیسبوک ایجاد و توسعه داده شده است. این فریمورک به شما اجازه می دهد اپلیکیشن های React مبتنی بر داده ای را ایجاد کنید که از GraphQL قدرت گرفته است. GraphQL یک زبان query است که از طریق آن می توانید درخواست های خاصی را برای سرور ایجاد کنید.

از GraphQL به عنوان جایگزینی برای REST استفاده می شود. فریمورک Relay شما را قادر می‌کند تا با اضافه کردن GraphQL به ویو هایی که از داده ها استفاده میکنند کوئری های ایستا بسازید سپس Relay این درخواست‌ها را به درخواست های سازگار در شبکه تبدیل می کند. از این طریق می توانید برنامه های سریع تر و با کارایی بالاتر ایجاد کنید. 

شما می توانید برنامه ای را که قبلا با React نوشته شده است به برنامه ای در Relay تبدیل کرده و یا برنامه جدیدی را با این فریمورک مدرن آغاز کنید.

 

6.Mithril.js

mithril-framework

Mithril.js فریم ورک جاوا اسکریپت سبکی بوده که شامل ویژگی هایی شبیه به React و Vue است. اگر شما به دنبال فریمورک واقعا کوچکی می گردید که با آن برنامه های single page خود را ایجاد کنید، جایگزین می تواند یک انتخاب عالی برای شما باشد. حجم این فریم ورک فقط ۸ کیلو بایت است و تقریباً دو برابر سریع‌تر از React و Angular است.

شبیه به ویوهای فریمورک های Vue و React فریمورک Mithril نیز بر روی کامپوننت ها تکیه دارد. با این حال این فریمورک دارای برخی ماژولهای داخلی است که نمی‌توانید آنها را در Reactپیدا کنید.

7.Aurelia

aurelia-framework

Aurelia بر روی استانداردهای وب تمرکز دارد و از کنوانسیون ها بیش از پیکربندی استفاده می کند. این فریمورک یک فریمورک منحصربه‌فرد در جاوا اسکریپت است، زیرا به شما اجازه می دهد کامپوننت های رابط کاربری را با استفاده از جاوا اسکریپ و یا TypeScript ایجاد کنید. کامپوننت های Aurelia در واقع کلاس های ساده JS/TS به همراه الگوهای HTML مربوطه هستند. قاعده نوشتاری این فریمورک تقریبا ساده است. در اینجا نمونه ای از آن آورده شده است :

// app.js
export class App {
  welcome = "Welcome to Aurelia";
}
<!-- app.html -->
<template>
  <form>
    <label for="name-field">What is your name?</label>
    <input id="name-field" value.bind="name & debounce:500">

  <p if.bind="name">${welcome}, ${name}!</p>
</template>

همانطور که مشاهده میکنید اگر شما HTML و JSرا بشناسید می توانید بدون نیاز به یادگیری بیشتر برنامه های Aurelia را ایجاد کنید.

8.SVELTE

svelte.jpg

فریمورک Svelte با هدف حل مشکلات حیاتی جاوا اسکریپت در وب به وجود آمد. سازندگانش آن را فریمورک جادویی ناپدید کننده رابطه کاربری می‌نامند. Svelte کامپایلر خود را داراست که کدهای برنامه را در زمان ایجاد به کدهای سمت کاربر جاوا اسکریپت تبدیل می کند. در نتیجه کدهای فریمورک زمانی که به مرورگر کاربر می‌رسند ناپدید می‌شوند. برنامه های Svelte بر اساس کامپوننت single-file با استفاده از اکستنشن html. ساخته می شوند.

 

منبع: لرن سورس

شهربانو دوستی
۲۷تیر

ساخت اولین پلاگین در جی کوئری نشان دهنده این است که شما در این فریمورک مبتدی نیستید. شما می خواهید چیزی را ایجاد کنید که بتوانید بارها و بارها از آن در پروژه‌های مختلف استفاده کنید و یا حتی آن را به دیگران بفروشید. ممکن است کمی سخت به نظر برسد اما در واقع ساخت یک پلاگین در جی کوئری فرایندی ساده است. در این مقاله به شما نشان می‌دهم که چطور یک پلاگین tooltip ساده ایجاد کنید.

plugin

Markup

هر پلاگینی در جی کوئری به مقداری Markup (کدهای html) نیاز دارد و در مثالی که در این مقاله بیان خواهد شد، تمام آن چیزی که نیاز داریم یک تگ لینک ساده بوده که دارای مشخصه  data attribute است. ما پلاگینی خواهیم ساخت که متن مشخصه ی data-tooltip را گرفته و به عنوان متن tooltip نمایش می‌دهد. پس کد های HTML ایی که برای این پلاگین استفاده می شود، حداقل بوده و شامل کدهای است که از یک تگ لینک بهره می‌برند :

<section>
<p>Your bones <a href="#" class="tooltip" data-tooltip="But mine do">don't break</a>
.That's clear. Your cells react to bacteria and viruses differently than mine. 
You don't get sick, I do. That's also clear. But for some reason, 
you and I react the exact same way to water. 
We swallow it too fast, we choke. We get some in our lungs, we drown.
However unreal it may seem, we are connected, you and I.
 We're on the 
<a href="#" class="tooltip" data-tooltip="just on opposite ends">same curve</a>.</p>
</section>

در نهایت باید بتوانیم به شکل زیر پلاگین مورد نظر را فراخوانی کنیم :

$('a.tooltip').tooltipMe();

بعد از آماده شدن همه موارد باید ارجاعی از جی کوئری را برای صفحه خود فراهم کنیم. سپس فایلی با پسوند js. را خواهیم ساخت که تعریف پلاگین در آن قرار می‌گیرد. ارجاعی از این فایل هم باید در صفحه وجود داشته باشد. توجه کنید شما باید همیشه ارجاع به جی کوئری را در ابتدا قرار داده و سپس ارجاعی از فایل پلاگین را در صفحه قرار دهید، در غیر اینصورت پلاگین شما کار نخواهد کرد.

ساخت پلاگین

اولین چیزی که باید به آن توجه کنیم محافظت از $ است. از آنجایی که این علامت در کتابخانه های مختلف جاوا اسکریپت استفاده می شود باید مطمئن شوید که هیچ تداخلی به وجود نمی‌آید. برای انجام این کار تمام کدهای خود را داخل تابعی به صورت زیر قرار می دهید :

(function ( $ ) {
//Our Code
}( jQuery ));

بعد از این کار باید نام پلاگین خود را با تعریف تابعی برای آن مشخص کنیم. در این مورد، من این پلاگین را TooltipMe نامگذاری کرده‌ام، اما شما می توانید هر نام دلخواهی را برای این قسمت تعیین کنید :

$.fn.tooltipMe = function() {

باید همیشه به خاطر داشته باشید که از متد each استفاده کنید، زیرا کاربر می‌تواند از پلاگین شما بر روی عناصر مختلف در صفحه استفاده کند. پس برای این کار نیاز است بررسی کنیم عنصری که کاربر انتخاب می‌کند یک لینک باشد :

this.each(function() {
   if($(this).is('a')) {

بعد از آن کافی است که از تابع hover برای ذخیره سازی مشخصه data-tooltip و ایجاد یک تول تیپ استفاده کنیم :

$(this).hover(function(e) {
    var text = $(this).attr('data-tooltip');   
    $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
    .css({
        backgroundColor: '#000',
        color: '#fff',
        borderRadius: '3px',
        opacity: 0.8,
        position: 'absolute',
        float: 'left'
    }).fadeIn('slow');		  
},

همانطور که در مثال بالا مشاهده می کنید بعد از گرفتن متن تول تیپ از صفحه، یک div به عنوان تول تیپ ایجاد کرده و آن را به لینک خود اضافه کرده ایم. با استفاده از متد css. در جی کوئری استایل های مورد نیاز را به تول تیپ خود اضافه کرده ایم. در این مورد از مشخصه های رنگ بک گراند، رنگ متن و ... استفاده شده است.

بعد از تنظیم این مشخصه ها از متد fadeIn برای ظاهر شدن تول تیپ به صورت انیمیشن استفاده کرده ایم. در نهایت هم از مقدار slow به عنوان آرگومان برای متد fadeIn بهره برده ایم. این مقدار باعث میشود که این انیمیشن مدت زمان بیشتری طول بکشد. با این حال شما میتوانید از مقادیر مختلفی برای این متد استفاده کنید.

کد هایی که تاکنون نوشته ایم یک تول تیپ را ایجاد میکند ولی همچنان با حرکت موس بر روی لینک و خروج از آن این تول تیپ حذف نمیشود. برای حل این مشکل نیاز است قسمت دوم تابع hover را تکمیل کنیم :

function() {
   $('#tooltip').remove();
});	
}

در مثال بالا تمام کاری که انجام داده ایم این است که وقتی موس کار از روی لینک خارج می شود تول تیپ ایجاد شده در مرحله قبل را حذف کنیم. کار آخری که باید انجام دهیم اضافه کردن مشخصه های top و left به div مورد نظر است. از آنجایی که برای تول تیپ مشخصه position با مقدار absolute مقداردهی شده است به راحتی می‌توان از مشخصه top و left برای تعیین مکان ظاهر شدن تول تیپ استفاده کرد :

$(this).mousemove(function(e) {
    $('#tooltip').css({
    top: e.pageY + 10,
    left: e.pageX + 10
    });
});
});
return this;
}
})(jQuery);

همانطور که در مثال بالا مشاهده می کنید از مقادیر e.pageY و e.pageX استفاده نموده ایم که مختصات دقیق نشانگر موس بر روی صفحه نمایش را تعیین می کنند. اکنون می توانید پلاگین خود را به شکل زیر فراخوانی کنیم :

$('a.tooltip').tooltipMe();

نتیجه

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

منبع: لرن سورس

شهربانو دوستی
۲۷تیر

در مقاله قبلی از این آموزش(چطور اولین پلاگین خود را در جی کوئری بنویسیم؟ قسمت اول)، یک پلاگین جی کوئری ساده را پیاده سازی کردیم. اما مشکلی که این پلاگین داشت این بود که کاربران کنترلی بر روی ظاهر تول تیپ نداشتند، در این مقاله کدهایی را به پلاگین خود اضافه می کنیم که به کاربران اجازه می‌دهند استایل پیش فرض پلاگین را تغییر دهند.

thumb-plugin

ایجاد آپشن های پلاگین

برای پلاگین اولین کاری که باید انجام دهید این است که به کاربران اجازه دهید در زمان فراخوانی پلاگین استایل های مورد نظر خود را به آن ارسال کنند. برای این کار باید کدی که در زمان تعریف نام برای پلاگین نوشته ایم را تغییر دهیم. کد قبلی به این شکل بود :

$.fn.tooltipMe = function() {

برای انجام این کار را پارامتری به نام options را به صورت زیر برای پلاگین خود در نظر می‌گیریم :

$.fn.tooltipMe = function(options) {

ساخت مشخصه های پیش فرض

از آنجایی که پارامتری را در قسمت قبل برای پلاگین خود در نظر گرفتیم، اکنون باید مقادیر پیش فرض مشخصه‌های پلاگین را هم مشخص کنیم. اگر کاربر از پلاگین بدون هیچ پارامتری استفاده کند، این مقادیر پیش فرض استفاده می‌شوند :

var defaults = $.extend({},{
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}, 

متغیری که در بالا تعریف کرده ایم باید درست بعد از نامگذاری پلاگین قرار بگیرد. در این متغیر ابتدا از jQuery.extend برای ترکیب مشخصه های پیش فرض و مشخصه هایی که کاربر از طریق پارامتر ارسال میکند، استفاده کرده ایم.

مشخصاتی که توسط کاربران ارسال می شوند، مشخصه های پیش فرض را بازنویسی می کنند. همچنین باید متغیر دیگری با مقادیر پیش فرض ایجاد کرده و سپس آن را به شکل زیر در داخل متغیر defaults قرار دهیم :

var settings = {
    background: '#000',
    color: '#fff',
    rounded: '3px',
    opacity: 0.8
}
defaults = $.extend({},settings, options);

تغییر مشخصه های متد CSS.

وقتی کار تنظیم متغیرها به شکلی که در بالا آمده است به اتمام رسید همچنان نمی توانیم از پلاگین خود به شکلی که میخواهیم استفاده کنیم. اگر نگاهی به متد CSS. در پلاگین مورد نظر بیاندازید، خواهید دید مشخصه‌ها همگی با مقادیر ثابتی مقداردهی شده اند. برای داینامیک کردن این مشخصه ها باید مقادیر مشخصه ها را به صورت پویا از متغیرهای تعریف شده دریافت کنیم :

they do we need to make them dynamic:

.css({
    backgroundColor: defaults.background,
    color: defaults.color,
    borderRadius: defaults.rounded,
    opacity: defaults.opacity,
    position: 'absolute',
    float: 'left'
})

در انتها دو مشخصه به صورت ثابت باقی خواهند ماند(position و float) که عملکرد پلاگین بر اساس آنها تعیین می شود. اکنون می توانید همه کدهای که برای نوشتن این پلاگین نیاز است را در زیر مشاهده کنید :

function($){
$.fn.tooltipMe = function(options) {
    var	defaults = $.extend({},{
        background: '#000',
        color: '#fff',
        rounded: '3px',
        opacity: 0.8
    }, options);
this.each(function() {
    if($(this).is('a')) {
    $(this).hover(function(e) {
        var text = $(this).attr('data-tooltip');
        $('<div id="tooltip"/>').appendTo($(this)).text(text).hide()
        .css({
            backgroundColor: defaults.background,
            color: defaults.color,
            borderRadius: defaults.rounded,
            opacity: defaults.opacity,
            position: 'absolute',
            float: 'left'
        }).fadeIn('slow');		  
        }, function() {
        $('#tooltip').remove();
        });	
    }

$(this).mousemove(function(e) {
    $('#tooltip').css({
        top: e.pageY + 10,
        left: e.pageX+ 10 
    });
});
});
return this;
}
})(jQuery);

فراخوانی پلاگین

در مقاله قبلی پلاگین خود را به صورت زیر فراخوانی میکردیم :

$('a.tooltip').tooltipMe();

 هم اکنون که مقادیر پیش فرض تنظیم شده است، میتوانیم پارامترهایی را برای پلاگین خود به صورت زیر در نظر بگیریم و سپس آن را فراخوانی کنیم :

$('a.tooltip').tooltipMe({  
       background: '#fff',
       color: '#000',
       rounded: '20px',
       opacity: 1
});

نتیجه

امیدوارم دو مقاله‌ای که در مورد پلاگین ها در جی کوئری به رشته تحریر در آمد به شما در توسعه پلاگین های پیشرفته تر کمک کند. این دو مقاله شرحی بر قدرت پلاگین های جی کوئری بودند که می‌تواند کار توسعه وب را بسیار ساده تر کنند.

منبع: لرن سورس

شهربانو دوستی