بیایید با یک مشاهده شروع کنیم: من چند چارچوب را دوست دارم. به‌عنوان جایگزینی برای اختراع کامل چرخ، یا طراحی یک دکمه از ابتدا، سخت است که یک راه‌حل همه‌کاره برای نیازهای اولیه HTML/CSS/JavaScript خود را شکست دهید.

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

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

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

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

اما هی، فریمورک های محبوب تر، به ویژه بوت استرپ، ابزارهای سفارشی سازی زیادی دارند، درست است؟ بله، و این یک چیز عالی است، اما گزینه های پیش فرض فضای کافی برای کار را در اختیار شما قرار نمی دهند.

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

یک مشکل دیگر که من با آن مواجه شده ام: ناسازگاری های جاوا اسکریپت. به عنوان مردی که واقعاً برنامه نویس نیست، این دردناک بود.

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

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

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

بنابراین یک جعبه ابزار چیست و چه تفاوتی با یک چارچوب دارد؟

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

شباهت ها

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

تفاوت

• جعبه ابزار هیچ گونه فرضیات طراحی یا ساختاری ایجاد نمی کند، چارچوب ها اغلب این کار را می کنند.
• جعبه‌های ابزار معمولاً از چیزهایی تشکیل می‌شوند که از منابع کاملاً متفاوتی می‌آیند.
• این فقط کد نیست، جعبه ابزار می‌تواند شامل نرم‌افزار، لینک‌های نشانک‌شده و غیره باشد روی.
• جعبه‌های ابزار معمولاً «فایل‌های پیش‌فرض» ندارند و شما را به انتخاب و انتخاب می‌گذارند.

پس کی باید از کدوم استفاده کنم؟

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

همین کیفیت همچنین سقوط چارچوب در پروژه های کوچک تا متوسط ​​است. آیا در حال ساخت یک فرود تبلیغاتی هستید؟ page? یک -page سایت اینترنتی؟ یک وبلاگ ساده؟ سپس یک چارچوب احتمالاً فقط غیر ضروری است. بهتر است از ابتدا شروع کنید و تمام جزئیات پروژه را از آن خود کنید.

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

جایی که فریم ورک هایی مانند Bootstrap و Foundation واقعاً می درخشند، توسعه برنامه های کاربردی وب و وب سایت های مبتنی بر برنامه است. در این پروژه هاست که محدودیت های نسبتاً سفت و سخت به کار می آیند، به جای اینکه سرعت شما را کاهش دهند.

چگونه جعبه ابزار خود را بسازیم.

ساختن جعبه ابزار خود یک مسئله زمان، صبر و تجربه است. منظورم این است که مطمئناً می‌توانید بروید و «منابع طراحی وب» را جستجو کنید. شما هزاران هزار بازدید دریافت خواهید کرد و در عرض چند ساعت می توانید تعداد بیت های کد بیشتری را نسبت به آنچه می توانید استفاده کنید دانلود کنید.

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

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

این بدان معنا نیست که هرگز نباید زمانی را صرف آزمایش با برخی «اسباب‌بازی‌های» جدید اختصاص دهید… باید. اگر در مورد منبع خاصی می شنوید که می تواند روش کار شما را برای بهتر شدن تغییر دهد، حتماً آن را بررسی کنید. اما به یاد داشته باشید که جعبه ابزار بهتر است نسبتا کوچک نگه داشته شوند. باید تمرکز کنی روی فقط آنچه را که برای برآوردن نیازهایی که مرتباً با آن مواجه می شوید نیاز دارید، حفظ کنید.

جعبه ابزار من

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

یک پیش پردازنده CSS

پیش پردازنده های CSS دوست دارند کمتر و SASS انجام دو کار:

1. آنها عملکرد پایه CSS را با متغیرها، میکسین ها، انتخابگرهای تودرتو و غیره گسترش می دهند.
2. آنها کدنویسی CSS را سریعتر می کنند.

اگر تا به حال کدنویسی CSS را با یک پیش پردازنده امتحان نکرده اید، از شما می خواهم همین الان این کار را انجام دهید. همین الان. من منتظر می مانم.

نشانک ها

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

Semantic.gs: موتور طرح بندی

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

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

راه حل به شکل است semantic.gs. در حال حاضر، در حالی که نویسنده خود آن را یک سیستم شبکه می‌نامد، من ترجیح می‌دهم آن را موتور طرح‌بندی بنامم، زیرا یک شبکه نیست. این یک ابزار مبتنی است روی پیش پردازش CSS (می توانید از آن با LESS، SASS و Stylus استفاده کنید)، و به شما امکان می دهد هر شبکه ای را که دوست دارید، با عرض ثابت یا پاسخگو ایجاد کنید، روی پرواز.

تنها کاری که باید انجام دهید این است که تعدادی اعداد را در یک فایل .less (یا SASS و غیره) تغییر دهید و بروید.

Emmet – قبلا به عنوان کدگذاری ذن شناخته می شد

امت مجموعه ای از افزونه ها است که اختصارات را به خطوط کامل کد، هم در HTML و هم در CSS تبدیل می کند.

اساساً اینطور می شود:

div>ul>li*3>a

در این مورد:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

چقدر باحاله؟

تکه ها

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

هر ویرایشگر متن خوب معمولاً راهی برای ذخیره و بازیابی آسان آنها دارد. در حال حاضر، مجموعه مورد علاقه من باید قطعه باشد این یکی برای وردپرس. توابع و گزینه های قالب وردپرس برای functions.php به خاطر سپردن دشوار است، بنابراین این یک نجات دهنده است.

پلاگین های جی کوئری

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

برخی از موارد مورد علاقه من عبارتند از:

• Scrollto.js: یک اسکریپت پیمایش صاف.
• idTabs: برای زمانی که به هر نوع رابط کاربری تب دار نیاز دارید.
• بزرگ شده: برای زمانی که به یک کل نیاز دارید page نمایش اسلاید.
• ResponsiveSlides.js: اسمش چی میگه این یک نوار لغزنده تصویر پاسخگو است. چه چیزی بیشتر می توانید بخواهید؟

برای داشتن کتابخانه شخصی از چیزهای مفید هرگز زود نیست.

دوست دارید چه ابزارهایی را در جعبه ابزار خود ببینید؟ بدون چه منابعی نمی توانید زندگی کنید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، تصویر جعبه ابزار ریاضیدان از طریق مارک کیرلند