معرفی چند پلاگین کاربردی جاوااسکریپت (#2)

Bootstrap Tags Input :

با استفاده از این پلاگین می توانیم فرم هایی که حالت کلمات کلیدی و تگ دارند را به صورت زیبا وارد کنیم.

bootstrap tags input

دانلود Bootstrap Tags input

Bootstrap Switch

با استفاده از این پلاگین می توانید رادیوباتن های جذاب و زیبایی برای پروژه های خود بسازید.

bootstrap switch

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

Bootstrap Tree View

با استفاده از این پلاگین میتوانید ساختار درختی برای لیستی از دسته بندی ها (  hierarchical tree structures ) داشته باشید. امکانات خوبی جهت دریافت مقادیر هر سطر و … ( events callback as nodeSelected, nodeChecked, nodeExpanded  ) را دارد.
Bootstrap tree view js

مشاهده پلاگین بر روی گیت هاب و مشاهده دمو

GRIDSTACK.JS

این پلاگین با استفاده از کتابخانه jQuery کار میکند و برای ایجاد حالت درگ دراپ برای المان های وب سایت استفاده میشود، در صورتی که برای بخشی از پروژه خود قصد ایجاد این حالت را دارید میتوانید به صورت کاملا ریسپانسیو این حالت را با این پلاگین ایجاد کنید. ( This is drag-and-drop multi-column grid )

drag-and-drop multi-column grid

مشاهده دمو پلاگین 

jsTree

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

( it supports HTML & JSON data sources and AJAX loading )

jsTree

اعتبارسنجی آجاکس – Is Valid Ajax Request

وقتی در پروژه های خود از AJAX استفاده میکنیم، قطعا با توجه به ساختار آن آدرسی را به مرورگر پاس می دهیم و درخواست AJAX را انجام میدهیم.

$.ajax({
    type 	: 'POST',
    url 	: 'editform.php',
    data 	: { data },
    success : function (response) {
       // code here
    }
});

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

function isValidAjaxRequest()
{
    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') 
    {
        return true;
    }
    
    return false;

}

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

if( isValidAjaxRequest() && isset( $_POST['body'] ) && isset( $_POST['operand'] ) )
	{
// code here	
	}

در صورت تمایل به مطالعه بیشتر در مورد AJAX می توانید لینک های زیر را بررسی و مطالعه نمایید.

یادگیری AJAX یکبار برای همیشه!

آموزش پروژه‌ محور آجاکس

معرفی چند پلاگین کاربردی جاوااسکریپت

dropify :

دراپی فای یکی از پلاگین هایی بود که وقتی باهاش کار کردم خیلی لذت بردم و استایل و امکان فوق العاده ای به وب سایت و فرم های شما میده تا هرچه بیشتر کاربرپسندتر باشه.

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

dropify plugin

croppie :

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

croppie image

 

JQuery Location Picker plugin – google map :

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

مشاهده مثالهای jquery location picker  ، دانلود و مشاهده پلاگین در گیت هاب

icheck :

با استفاده از این پلاگین میتوانید به راحتی دیزاین فرم های وب سایت خود را به صورت زیبا و کاربرپسند طراحی کنید.

icheck

برای دانلود و مشاهده  نمونه ها و نحوه استفاده وب سایت http://icheck.fronteed.com/ را مشاهده نمائید. و یا در
گیت هاب
از آن استفاده نمائید.

bootstrap select :

با استفاده از این پلاگین به راحتی میتوانید تگ های select خود را استایل دهی زیبایی کنید و رابط کاربری وب سایت خود را بهتر و زیباتر کنید.

selectpicker

میتوانید نمونه select هایی که با این پلاگین میتوان ایجاد کرد را در وبسایتش و در منوی example مشاهده نمایید.

برای تغییر استایل هم میتوانید کدهای زیر رو به استایل پروژه خود اضافه کنید :

.bootstrap-select .btn {
    background-color    : #fff;
    font-weight         : 300;
    -webkit-appearance  : none;
    -moz-appearance     : none;
    appearance          : none;
}
.bootstrap-select.btn-group .dropdown-toggle .filter-option{
    text-align: right !important;
}
.bootstrap-select .dropdown-menu {
    margin: 15px 0 0;
}
select::-ms-expand {
    /* for IE 11 */
    display: none;
}

bootstrap-colorselector

در برخی از پروژه ها، نیاز به فرم هایی است که کاربر رنگهایی را در وب سایت انتخاب نماید، این پلاگین برای من بسیار جذاب و کاربردی بود.

bootstrap color selector

دانلود  bootstrap color selector 

دسترسی به bash_profile و ایجاد یک alias

برای دسترسی به پروژه هایی که روی گیت لب و یا گیت هاب داریم و clone کردن آنها روی سیستم، مکانی را روی سیستم بهشون اختصاص میدیم و هر سری برای دسترسی به اون پروژه با استفاده از cd address روی ترمینال به محیط پروژه دسترسی پیدا میکنیم.

اگر محیط ترمینال شما iTerm است قبلا در رابطه با سفارشی کردن iTerm ویدیویی رو منتشر کردم، میتوانید مشاهده کنید.

برای راحتی کار و اینکه با نوشتن یک کلمه مثلا projectName ، میتوانیم به محیط پروژه دسترسی داشته باشیم که برای اینکار باید یک alias داخل فایل .bash_profile تعریف کنیم.

نحوه ایجاد یک alias

  1. Start up Terminal
  2. Type “cd ~/” to go to your home folder
  3. Type “touch .bash_profile” to create your new file
  4. Edit .bash_profile with your favorite editor (or you can just type “open -e .bash_profile” to open it in TextEdit
  5. Add ” alias project=”cd /YOUR_ADDRESS ” to .bash_profile file
  6. Type “. .bash_profile” to reload .bash_profile and update any functions you add

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

کتاب چهار میثاق

کتاب چهار میثاق اثری از دون میگوئل روئیز

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

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

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

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

بررسی و تحلیل بخش های از مطالب کتاب چهار میثاق :

۳۰۰۰ سال پیش شخصی آموزش میدید که حکیم شود تا دانش نیاکان خود را یاد بگیرد و ادامه دهد اما چیزی در دلش بهش میگفت که چیزی بیشتر از آن موارد را باید فرابگیرد…

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

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

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

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

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

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

آنان به این باور رسیدند که او تجسمی از خداوند است، وقتی این را شنید لبخندی زد و گفت حقیقت دارد، من خدا هستم اما شما هم خدا هستید، ما مثل هم هستیم من و شما، ما تجلی نور هستیم، ما خدا هستیم… اما باز هم مردم او را درک نمیکردند…

او خود را در همه میدید…

فهمید که به زودی همه مواردی که آموخته است را فراموش میکند، برای اینکه همه آنچه را که آموخته است به خاطر آورد پس تصمیم گرفت خویشتن را آینه دودی بنامد ، تا بتواند همیشه به خاطر آورد که ماده یک آینه است و دود بین آینه ها آنچیزی است که نمیگذارد بدانیم که چه کسی هستیم، او میگفت من آینه دودی هستم چون در همه شما به خویشتن نگریستم اما اگر نمیتوانیم خود را در دیگران باز شناسیم به دلیل وجود دود بین آینه هاست، این دود رویاست و آینه شما هستید کسی که رویا می بیند…

اما در اینجا رویا به چه معناست!

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

ما با توانایی رویا دیدن به دنیا می آیم و انسان هایی که پیش از ما زیسته اند به ما می آموزند که چگونه به شیوه جامعه رویا ببینیم!

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

در واقع رویا همان افکار و باورهایی است که ما از اطرافیان و دیده ها و شنیده ها آموخته ایم که میتواند درست و یا غلط باشد. الان سوالی که مطرح می شود که چگونه میتوان فهمید یک باور درست یا غلط؟! چگونه میتوان فهمید باید این باور را تغییر داد یا باورش کرد؟! پاسخ به این سوال یک کلمه است “احساس”. باور و طرز تفکری که به ما احساس خوب و آرامش بدهد از سرچشمه اش نشات میگیرد و با ذات انسان همخوانی دارد.

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

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

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

به تدریج که میثاق ها را می پذیریم آنها را باور میکنیم و این آن چیزی است که ایمان نامیده می شود، ایمان داشتن یعنی باور داشتن بدون قید و شرط…

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

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

ما همچنین قضاوت کردن را یاد میگیریم، خودمان را مورد قضاوت قرار میدهیم، دیگران را مورد قضاوت قرار می دهیم، نزدیکانمان را مورد قضاوت قرار می دهیم…

همه تمایلات ما در فرآیند اهلی شدن از بین رفته است

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

دانلود کتاب صوتی چهار میثاق

آرشیو دستورات گیت – git

در این مطلب قصد دارم به مرور دستورات گیت  و … را آرشیو کنم تا در مواقع ضروری از آن استفاده کنم 🙂

گیت چیست ؟!

گیت یک ورژن کنترل است!

گیت (به انگلیسی: Git) یک نرم‌افزار کنترل نسخه و از مدل نرم‌افزارهای آزاد و متن‌باز برای بازنگری کد منبع توزیع شده و مدیریت منبع کد است که برای دنبال کردن تغییر فایلهای کامپیوتری و دنبال کردن کردن کارهای انجام شده روی آنها توسط افراد مختلف است. هدف اولیه این نرم‌افزار برای استفاده در پروژه‌های نرم‌افزاری بوده است ولی می‌توان از آن تنها برای دنبال کردن تغییر فایل‌ها هم استفاده کرد. [ ویکی پدیا ]

نصب و فعال سازی گیت :

برای نصب و دانلود گیت به وب سایت git-scm.com مراجعه کنید و مراحل نصبش را طی کنید و برای نصب گیت هاب هم در صورتیکه وارد وبسایت گیت هاب شوید می توانید نرم افزار مربوط به گیت هاب را دانلود کنید و به راحتی ریپازیتوری هایی که ایجاد میکنید را مدیریت کنید.

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

ایجاد SSH key برای گیت لب

برای دسترسی به پروژه ها باید یک کلید SSH در پروفایل خود ایجاد کنید که مدیریت و بررسی دسترسی شما به پروژه برای استفاده از گیت است، مطابق تصویر زیر وقتی وارد پروفایل گیت لب خود می شوید لینک Generate برای ایجاد کلید اختصاصی گیت لب برای پروفایل شما نمایش داده می شود که با کلیک روی آن و طی مراحل آن به راحتی کلید را ایجاد میکنید و در کادر مربوطه در پروفایل خود قرار می دهید.

profile settings ssh keys gitlab

گیت لب ( GitLab )

دستورات گیت به صورت زیر هستند :

git init [project name]

ایجاد یک ریپازیتوری جدید بر روی سیستم خود

git clone MY_URL

دانلود از یک ریپازیتوری موجود (url) بر روی سیستم خود

git status

لیست تغییرات و یا فایل های جدیدی که هنوز commit نشدند.

git add .

افزودن همه فایلهای جدید به stage و آماده بودن برای commit

git add [file name]

افزودن فایل موردنظر به stage و آماده برای commit کردن

git commit -m "Description "

commit کردن همه فایلهای موجود در stage

git commit am "Commit Description "

به طور همزمان، هم فایل ها را add میکنیم و هم commit  میکنیم و توضیحی برای commit قرار می دهیم.

git commit -a automatically stage all tracked, modified files before the commit If you think the git add stage of the workflow is too cumbersome, Git allows you to skip that part with the -a option. This basically tells Git to run git add on any file that is “tracked” – that is, any file that was in your last commit and has been modified. This allows you to do a more Subversion style workflow if you want, simply editing files and then running git commit -a when you want to snapshot everything that has been changed.

git push 

آپلود و ارسال فایلهای جدید به سرور زیر نظر branchی که در آن هستیم.

git push origin master

آپلود و ارسال فایلهای جدید به سرور زیر نظر branch اصلی master که معمولا اینکار انجام نمی شود و ترجیحا روی branch دیگری push میکنیم و سپس merge میکنیم.

git pull 

دریافت آخرین تغییرات از سرور و merge.

git branch

مشخص شدن این موضوع که در کدام branch هستیم و کدها را در کدام branch تغییر و یا دریافت میکنیم.

git fetch

و یا 

git fetch --all

دریافت آخرین تغییرات از origin branch. ( no merge )

( در صورتیکه در Branchی هستیم و میخواهیم تغییر branch دهیم، اگر branch را جدیدا ایجاد کرده باشیم باید کد فوق را وارد کنیم تا branch ها و تغییرات شناسایی شوند. )

git branch --all

و یا

git branch

نمایش لیست همه branch

git checkout Develope

تغییر branch مثلا به شاخه Develope

git branch New_Branch 

ایجاد Brnach جدید با نام New_Branch.

git branch -av 

نمایش لیست تمام Branchها، Local and Remote

git branch -d My_Branch 

حذف My_Branch از لیست Branchها.

git checkout Branch_A
git merge Branch_B 

Merge کردن Branch_B داخل Branch_A.

git diff 

نمایش تغییرات فایلهایی که هنوز وارد stage نشدند.

git diff --cached 

نمایش تغییرات فایلهایی که وارد stage شدند.

git diff HEAD 

نمایش تمام تغییرات فایلهایی که وارد stage شدند و فایل هایی که هنوز وارد stage نشدند (Unstage).

git diff commit1 commit2 

تفاوت تغییرات بین دو commit را نمایش میدهد.

git blame [File Name] 

لیست تمام تغییرات فایل موردنظر را همراه با تاریخ و نام دولوپری که تغییرات را ایجاد کرده است نمایش می دهد.

git log

نمایش لیست تمام تغییرات فایل ها.

git log -p [file/directory[

نمایش تاریخچه لیست تغییرات فایل file/directory با نمایش لیست تغییرات آنها (diff) در جریان کامیت ها.

git reset [file[

unstage  کردن فایل مورد نظر و اعمال تغییرات جدید.

git reset --hard

بازگردانی ( Revert ) تمام تغییرات از آخرین commitی که انجام شده است.

افزونه های کاربردی گوگل کروم

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

اکستنشن های کاربردی و مهم گوگل کروم :

۱ – infinity new tab

این افزونه قابلیت های بسیارجالب و دلپذیری رو به کروم اضافه میکند، بکگراوندهای متنوع و جذابی به مرورگر میدهد.

  • جستجوی اینترنتی را برای موتورهای جستجوی مختلف تنظیم می کند.

search engin

  • مرتب سازی لیست بوکمارکها و هیستوری ها

infinity new tab bookmark

  • قابلیت تعریف تسک های روزانه به صورت to do list

دانلود و نصب اکستنشن 

۲ – ColorZilla

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

 

colorZilla

colorZilla - color format rgb

colorZilla

دانلود و نصب اکستنشن بر روی گوگل کروم 

۳ – Alexa Traffic Rank

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

الکسا

دانلود و نصب الکسا بر روی کروم

۴ – Google Calendar – by Google

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

google calendar

google calendar

دانلود و نصب نصب پلاگین

۵ – JSON Formatter

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

JSON Formatter

صفحه گیت هاب اکستنشن 

دانلود و نصب پلاگین بر روی گوگل کروم

۶ –  HTML5 Outliner

این پلاگین برای من خیلی جذاب بود چراکه ساختار وبسایت رو بهم نمایش میده و اگر قصد دارید ساختار وبسایت از لحاظ تگ های هدینگ درست و منظم باشه میتونید با این پلاگین بررسیش کنید که بر اساس تگ های h1 تا h6 ساختار وبسایت رو نمایش میدهد که قطعا برای سئو مناسبتر خواهد بود.

html5 outliner - SEO

دانلود و نصب پلاگین

۷ – Instant Wireframe

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

وایرفریم - wireframe wireframe - instant wireframr

دانلود و نصب اکستنشن

۸ – Magicword Translator

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

 Magicword Translator Magicword-Translator

دانلود و نصب پلاگین 

۹ –  Wappalyzer

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

دانلود و نصب پلاگین 

۱۰ – Web Developer

میشه گفت این پلاگین رو هر دولوپری روی مرورگرش نصب شده دارد!

Web Developer tools

Web developer tools

دانلود و نصب پلاگین 

سفارشی کردن محیط sublime text

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

در این ویدیوی کوتاه تجربیاتم و مواردی که خودم ازش استفاده میکنم را سعی کردم واضح و شفاف با دوستان به اشتراک بذارم.

موضوع ویدئوی آموزشی

در رابطه با sublime text و نصب پکیج های اون و package control صحبت کردم و همچنین چگونه کلیدهای میانبر(short keys) برای خودمون ایجاد کنیم.

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

ویدیوی آموزشی کاستومایز کردن محیط sublime text در آپارات

 

ویدیوی آموزشی کاستومایز کردن محیط sublime text در یوتیوب

 

آرشیو اول : دستورات و نکات مهم لاراول

همانطور که در اولین مطلب وبلاگم اشاره کردم بسیاری از مطالبی که در وبلاگم منتشر میکنم برای آرشیو کردن آن ها برای خودم است و امیدوارم  برای  برخی از دوستان هم کاربرد داشته باشه.

( لاراول ۵.۴ )

در این مطلب در رابطه با مواردی که در لاراول لازم میشه اشاره میکنم :

۱- ایجاد ارتباط بین فیلدهای جداول دیتابیس در migration :

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

پس در migration مربوط به مقالات که نام مقاله و slug ، …. وجود داره یک فیلد به نام user_id وجود داره که به فیلد id موجود در جدول users اشاره میکنه. ( جدول users مشخصات کاربران را ذخیره میکند )

پس داخل فایل migration مربوط به مقالات به این صورت می نویسیم :

$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');

۲ –  گروه بندی مسیریابی Rout در فایل web.php

همانطور که میدونید برای اینکه مثلا لیست مقالات مربوط به وبسایت رو نمایش بدیم باید در فایل web.php که در فولدر rout است مسیردهی مورد نظر و کنترلر و تابع اون رو مشخص کنیم، برای مثال اگر قرار باشه با مسیر mekaeil.me/admin/articles لیست تمام مقالات را نمایش دهیم مسیردهی در فایل web.php به صورت زیر خواهد بود :

Route::get('/admin/articles', 'Admin\[email protected]')->name('admin.article.list');

که در اینجا با فراخوانی آدرس /admin/articles بعد از نام دامنه، کنترلر ArticlesController که در مسیر Http > Controllers > Admin > ArticlesController وجود دارد فراخوانی میشود و تابع list موجود در این فایل مدیریت نمایش لیست مقالات و ارسال اطلاعات به view را انجام خواهد داد.

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

Route::namespace('Admin')->prefix('admin')->group(function(){

$this->get('/articles', '[email protected]')->name('admin.article.list');

// Another rout here ...
});

۳ – ایجاد کنترلرها و متدهای مربوط به آن ( CRUD )

هنگام ایجاد اپلیکیشن ها و برنامه ها، متدهای Create , Read, Update, Delete , Store  در کنترلرهای مربوط به مدیریت برنامه استفاده میشود، برای ایجاد کنترلر و متدهای مربوط به آن، بعد از اینکه مدل مورد نظر را ایجاد کردیم میتوانیم با استفاده از دستور زیر به صورت Resource کنترلر موردنظر را ایجاد کنیم در حالتی که شامل متدهای مورد نظر هستند‌:

php artisan make:controller PhotoController -r

CRUD

در حالت فوق متدهای show , edit و … مقداری به نام $id را به عنوان ورودی متد دریافت میکنند تا عملیات مورد نظر انجام شود :‌

Rout model binding in laravel

حالا با تغییر دستور ترمینال به صورت زیر، میتوان با استفاده از rout model binding دسترسی و ارتباط میان کنترلرها و مدلها را برقرار کرد :

 php artisan make:controller ArticleController -r --model=Article

۴ –  insert داده های اولیه ( پیشفرض ) به جداول دیتابیس

من برای پروژه ای که داشتم باید هنگام راه اندازی پروژه یکسری داده ها به صورت پیشفرض به جداول دیتابیس اضافه میشد تا بتوانن هنگام برنامه نویسی هم از آنها استفاده کرد. برای مثال دسته بندی به نام “پیشفرض” به جداول دسته بندی ها اضافه کردم تا وقتی اگر یک مقاله ای آپلود و منتشر شد در صورتیکه دسته بندیی وجود نداشت و یا انتخاب نشد به صورت اتوماتیک این دسته بندی انتخاب شود و یا اگر یک دسته بندی حذف شد، تمام مقالات مربوط به آن دسته بندی به جای حذف به آن دسته بندی نسبت داده شوند.

برای ایجاد این داده های پیشفرض، من داخل فایل migration مربوط به جدول مورد نظر داده ها را اضافه کردم به صورت زیر :

    public function up()
    {
        Schema::create('articlecats', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('slug')->nullable();
            $table->timestamps();
        });

        // Insert Default Data
        DB::table('articlecats')->insert(
            array(
                'id'            => '1',
                'name'      => 'پیشفرض',
                'slug'          => 'default',
                'created_at'    => '1991-07-14',
                'updated_at'    => '1991-07-14'
            )
        );    
    }

۵ – افزودن کاربر به دیتابیس به صورت دستی

گاهی وقت ها هنگام ایجاد پروژه در بخش هایی که هنوز به بخش سطوح دسترسی و احزارهویت کاربران نرسیدیم و لازم است یکسری دیتا را ایجاد کنیم، برای ایجاد این دیتاها از سمت برنامه باید کاربر لاگین کرده باشد و برای لاگین بودن کاربر باید کاربری وجود داشته باشد! پس به صورت دستی یا از سمت phpmyadmin کاربری را ایجاد میکنیم و یا با استفاده از کدنویسی و قراردادن در یکی از فانکشن های کنترلر کاربر را ایجاد میکنیم و سپس کد را حذف میکنیم، که من شخصا راه دوم رو با استفاده از کد زیر انجام میدم.

return User::create([
'name' => 'Mekaeil Andisheh',
'level' => 'admin',
'email'=> '[email protected]',
'password'  => bcrypt('123456')
 ]);  

 

رفع مشکل Migration , Doctrine DBAL

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

برای یکی از فیلدها مجبور شدم که type فیلد رو از string به text تغییر بدم که migration را به صورت زیر ایجاد کردم :

    public function up()
    {
        Schema::table('articles', function (Blueprint $table) {
            $table->text('FeatureImage')->nullable()->change();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('articles', function (Blueprint $table) {
            $table->string('FeatureImage')->nullable()->change();
        });
    }

بعد از اینکه با اجرای دستور php artisan migrate با خطای زیر مواجه شدم :

doctrine/dbal laravel5.4

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

composer require doctrine/dbal

با اجرای دستور فوق ( به احتمال خیلی زیاد باید فیلترشکن فعال باشه تا بتونید نصب کنید ) مشکل رفع میشه و مجددا عملیات migrate را انجام دهیم به خوبی کار انجام میشه :

update and install composer

( لاراول ۵.۴ )