ساخت تصاویر بند انگشتی به وسیله لاراول

سلام

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

یه راه حل دیگه اینه که بیاییم به صورت اتوماتیک تصاویرمونو به وسیله اسکریپت resize کنیم. که این خودش نیازمند برنامه‌نویسی و محاسباته(هر چند اندک). با زبان PHP به راحتی میتونیم این مهم رو پیاده سازی کنیم.

کاری که تو این مطلب می‌خوام به شرحش بپردازم نوشتن تابعی برای resize کردن تصاویر در لحظه به وسیله فریمورک محبوب لاراول و پکیج دوست‌داشتنی intervention/image ـه. خب شروع کنیم به کار:

نصب پکیج intervention/image:

خب نیازمندی‌های این پکیج به این ترتیبه:

  • php >= 5.3
  • Fileinfo extension
  • GD lib >= 2.0 یا Imagic PHP extension >= 6.5.7

ابتدا نام پکیج و نسخه مورد نیازمونو در فایل composer.json در قسمت require اضافه می‌کنیم:

سپس به وسیله ترمینال دستور زیر را در دایرکتوری فایل composer.json اجرا می‌کنیم تا پکیج نصب شود:

بعد از اون فایل config/app.php را باز کرده و خطوط زیر را به ترتیب در آرایه‌های providers  و aliases  اضافه می‌کنیم:

و

ایجاد کنترلر کار با تصاویر و متد‌ تغییر سایز تصاویر:

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

 

تعریف  Route برای دسترسی به متد:

برای دسترسی به متدمون و فراخونی اون از هر جای اپلیکیشن نیازمند تعریف یک مسیر یا Route هستیم. برای اینکار فایل routes.php را باز کرده و مسیر جدیدی تعریف می‌کنیم:

 ایجاد تصاویر بندانگشتی:

در مرحله آخر می‌رسیم به استفاده از اسکریپتمون. برای این کار فرض کنیم ما تصویری داریم با این آدرس: http://site.com/images/image1.png که دارای سایز ۱۳۶۰x768ـه و ما میخواهیم تصویری با پهنای ۲۰۰ بسازیم و میخواهیم که ارتفاع تصویر هم به نسبت پهنا تغییر کنه. پس فقط کافیه آدرس زیر رو تو هر جای اپلیکیشن( چه کنترلرها و چه داخل کدهای html) صدا بزنیم:

که در صورت عدم وجود تصویر اصلی، تصویری با رنگ خاکستری روشن و به سایز ۲۰۰x200 ایجاد میشه و در صورت وجود تصویر اصلی، تصویری بندانگشتی به سایز ۲۰۰x113 پیکسل ایجاد میشه. در صورتی که بخواهیم با  ارتفاع دلخواه خودمون تصویر ساخته بشه کافیه پارامتر h را به تابع route بدیم.

راهنمایی:

برای نصب اکستنشن در php کافیه در اوبونتو دستور زیر رو بزنیم:

 

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

فقط یادتون باشه که بعد از اینکار باید apache را restart یا  reload کنید، اونم با این دستور:

موفق باشید.

داکیومنت همه زبان‌ها و کتابخونه‌ها را یه جا داشته باشید!

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

devdocs.io

این ابزار فوق‌العاده DevDocs نام داره. وب‌اپلیکیشن بسیار کاربردی و مفیدی که روزبه‌روز داره کامل‌تر میشه و چیزای بیشتری بهش داره اضافه می‌شه. الان که دارم این پستو می‌نویسم، ۴۸ تا زبان و کتابخونه و فریمورک رو پشتیبانی می کنه که همشونم پراستفاده و معروفن. برای نمونه مثلن داکیومنت زبان‌های C, C++, JavaScript, PHP, Ruby, Python, go و  فریمورک‌های Laravel, AngularJs, BackboneJs, EmberJs, Django, jQuery, Yii و  ابزارهای دیگه مثل NodeJs, nginx, momentJs, lo-dash, Underscore, CSS, HTML, DOM و بسیاری دیگه از ابزارها که روزانه ازشون توی کدنویسی و توسعه استفاده می‌کنیم رو شامل میشه.

شما می تونید داکیومنت‌هایی رو که لارم دارین از لیست انتخاب کنید تا همیشه در دسترستون باشند حتی وقتی آفلاین هستید!. بهتره از سخن کم کنیم و بریم یه سری به DevDocs بزنیم.

به راحتی آب خوردن Regular Expression بنویسید!

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

Regular expression

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

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

اولین کاری که شما باید بکنید اینه که فایل مربوط به کتابخونه رو تو پروژه‌تون صدا بزنید. ما برای این مطلب از کتابخونه جاوااسکریپت VerbalExpressions استفاده می‌کنیم. برای این کار کافیه به وسیله خط زیر کتابخونه رو تو پروژه‌تون صدا بزنید:

سپس کد توی کدمون خودکتابخونه رو صدا زده و ازش یه شی می‌سازیم:

حالا میخواهیم یک عبارت باقاعده بنویسیم که کار اعتبارسنجی URL وب‌سایت را انجام بده، به صورت معمولی باید یه همچین عبارت باقاعده‌ایو بنویسیم:

ولی با استفاده از VerbalExpressions به این صورت عمل میکنیم:

همونطور که تو کد بالا هم میبینید، این کتابخونه و توابعش به زبان طبیعی انسان بسیار نزدیکه و از اینرو کاملا قابل فهم می‎باشد.

حالا یه مثال دیگه که این یکی در مورد Replace کردن یک متن به وسیله regula expression هست:

برای دانلود کتابخونه VerbalExpressions به زبانهای javaScript , PHP, Python, C#,Java, c++, Objective-c , Ruby بهمحل پروژه بر روی گیت‌هاب مراجعه کنید.

مستندات VerbalExpressions

آموزش کار با Emmet یا Zen Conding

سلام

امروز می‌خوام یه ابزارو معرفی کنم که حتما بعضی‌ها می‌شناسنش و باهاش کار می کنن و مطمئنن بعد از یه مدت کار با اون می فهمن که بدون اون کار کردن سخت میشه. اون ابزار چیزی نیست جز  Emmet یا Zen Coding. این دو تا اسم جفتشون یکیه و فکر کنم الان اسم رسمیش همون Emmetه.

خب بیایید ببینیم این ابزار به چه دردی میخوره؟ تو یه جمله باید بگم که نوشتن کد Html, CSS, Xsl رو خیلی آسون می کنه. بزارید با یه مثال توضیحش بدم. فرض کنیم ما میخواهیم یه جدول بسازیم با ۵ تا ردیف و ۵ تا ستون. خب حجم کد نسبتن بالایی داره:

 

خب حالا با zen coding تو سه سوت کد بالا رو می‌نویسیم، اینطوری:

 

بعدش دکمه Tab رو می زنیم و به صورت خودکار کد بالا تولید میشه. پس همونطور که متوجه شدید، Emmet کارش تسریع کار و خلاصه‌نویسی کد هستش.

حالا بیایین یه چند تا مثال دیگه بزنیم:

 

که خروجیش میشه:

 

مثال زیر فکر می کنم بهترین و قشنگ‌ترین مثال Emmetعه. فرض کنیم می‌خواهید یه صفحه HTML از صفر درست کنید. خب نیاز دارید تا یه سری تگ مثل نوع سند و یا متاتگ‌ها را تعریف کنید ولی با Emmet اینطوری عمل می‌کنیم:

 

بله، فقط ! و بعدش Tab رو می‌زنیم، اینم خروجیش:

 

خب تا اینجا مثال‌هایی از HTML زدیم، حالا می‌خوام چند تا مثالم از کاربردش توی CSS بزنم:

فرض کنیم می خواهیم یک وب‌فونت جدید با فرمت‌های مختلف به فایل‌ CSSمون اضافه کنیم:

 

که خروجیش میشه این:

 

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

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

بعضی جاها اسمش Emmet و بعضی جاها Zen Coning عه.

اینم لینک دانلودش + برگه تقلب (Cheat Sheet)

+ اینم راهنمای خوبیه