قراردادن چند کد امنیتی reCaptcha در یک صفحه

برای آشنایی با reCaptcha اینجا کلیک کنید

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

فعال‌سازی reCaptcha به صورت ضمنی( Implicit ) یا اتوماتیک حاوی این محدودیت است و هنگام فعال‌سازی تنها اولین فیلد حاوی کد امنیتی فعال سازی می‌شود
ادامه‌ی خواندن

ارسال شده در برنامه‌نویسی, جاوااسکریپت, عمومی | برچسب‌شده , , , | دیدگاه‌تان را بنویسید

پردازش تعداد زیاد ردیف‌های پایگاه داده در لاراول

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

ارسال شده در PHP, برنامه‌نویسی, عمومی, پایگاه داده | برچسب‌شده , , , , | دیدگاه‌تان را بنویسید

آشنایی با CORS یا Cross-origin resource sharing

HTTP access control (CORS)

CORS کوتاه‌شده‌ی عبارت Cross-origin resource sharing است. محل کاربرد CORS در مرورگرهای مدرن و برای بررسی اجازه‌ی دسترسی از راه دور به منابع و سرویس‌های تحت وب است.
برای مثال در حالت عادی امکان استفاده از فایل‌های فونت از روی یک سرور دیگر وجود ندارد یا امکان ارسال یک درخواست AJAX از روی دامنه‌ای غیر از دامنه‌ی فعلی ناممکن است.CORS ابزاری است که روشی برای حذف این محدودیت در اختیار برنامه‌نویسان قرار می‌دهد.
ادامه‌ی خواندن

ارسال شده در HTML, امنیت, برنامه‌نویسی, عبارت‌های منظم, فناوری, لاراول | برچسب‌شده , , | ۲ دیدگاه

ایجاد کننده اسکریپت درج والد و فرزند در پایگاه داده MySQL

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

برای استفاده‌ی آنلاین از این ابزار، اینجا کلیک کنید

ارسال شده در HTML, نرم‌افزار | برچسب‌شده , , , | دیدگاه‌تان را بنویسید

هفت نکته‌ی مهم SEO در سال ۲۰۱۵

سئو ۲۰۱۵

همزمان با سپری شدن زمان، الگوریتم‌های رتبه‌بندی سایت‌ها توسط موتورهای جستجو نیز در حال تحول و بهبود مداوم هستند، انجام SEO یا بهینه‌سازی موتورهای جستجو، نیز نیازمند فرآیندهای متفاوتی نسبت به گذشته است.
آنچه در ادامه مشاهده می‌کنید، فهرستی از آخرین روش‌های بهبود SEO در سال ۲۰۱۵ هستند.

ادامه‌ی خواندن

ارسال شده در SEO | برچسب‌شده , , | دیدگاه‌تان را بنویسید

اعتبارسنجی فیلدهای متنی برای حروف فارسی با استفاده از jQuery

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

$( 'body' ).on( 'keypress', 'input.persian', function( e ) {
	// backspace, delete, tab, escape, enter
	if ( $.inArray(e.keyCode, [ 46, 8, 9, 27, 13 ]) !== -1 ||
		 // Ctrl+A
		( ( e.charCode == 65 || e.charCode == 97 ) && e.ctrlKey === true ) || 
		 // home, end, left, right
		( e.keyCode >= 35 && e.keyCode <= 39 ) ) {
			 return;
	}
 
	if ( -1 == $.inArray( String.fromCharCode( e.charCode ), ['‌', ' ', 'آ','ا','ب','پ','ت','ث','ج','چ','ح','خ','د','ذ','ر','ز','ژ','س','ش','ص','ض','ط','ظ','ع','غ','ف','ق','ک','گ','ل','م','ن','و','ه','ی','ي','ك','ة'] ) ) {
		e.preventDefault();
	}
 
} );

برای استفاده از این قطعه کد، می‌بایست آن را در ابتدا یا انتهای فایل html خود فراخوانی کنید.
پس از فراخوانی این کد، تمامی inputهایی که صفت class آن‌ها مقدار persian را داشته باشد، به صورت خودکار ارزیابی می‌شوند.

<input class="persian" name="fname" type="text" />
<input class="persian" name="lname" type="text" />

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

ارسال شده در جاوااسکریپت, عمومی | برچسب‌شده , , , , | یک دیدگاه

آشنایی با Zepto.js به عنوان جایگزینی برای jQuery

Zepto.js یک کتابخانه‌ی سمت مرورگر است که می‌تواند در برخی کاربردها جایگزین مناسبی برای jQuery باشد. مهم‌ترین ویژگی Zepto، سازگاری ساختار این کتابخانه با جی‌کوئری است. به این معنی که چنانچه شیوه‌ی کدنویسی با jQuery را بدانید، شیوه‌ی کدنویسی Zepto را نیز فرا گرفته‌اید.

فلسفه‌ی Zepto

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

ارسال شده در برنامه‌نویسی, جاوااسکریپت | برچسب‌شده , | دیدگاه‌تان را بنویسید

رویدادهای delegate در جی‌کوئری

رویدادها یا eventهای delegate رویدادهایی هستند که به عنصرهای اصلی متصل نمی‌شوند. برای مثال چنانچه یک جدول با ۱۰۰ ردیف و ۱۰ ستون داشته باشیم، و بخواهیم زمان کلیک شدن روی یک سلول از این موضوع با خبر شویم، با پیوست کردن رویداد click به عنصر table می‌توانیم از وقوع کلیک روی هر سلول باخبر شویم.

علت عملکرد رویدادهای delegate این است که اغلب مرورگرها، رویدادها را به صورت درختی منتشر می‌کنند. یعنی در هنگام کلیک روی یک عنصر td، عنصرهای tr، tbody، table و body به ترتیب از این رویداد مطلع خواهند شد.

دو سناریو برای استفاده از رویدادهای delegate به جای پیوست کردن رویدادها به تک‌تک عنصرها وجود دارد.

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

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

استفاده از رویدادهای delegate در نگارش‌های مختلف jQuery به شیوه‌های مختلفی انجام می‌شود. قدیمی‌ترین روش که اکنون منسوخ شده است استفاده از دستور live است. این تابع، به صورت ضمنی، رویدادها را به عنصر body متصل می‌کند و بر اساس selector مشخص شده، رویدادهای مربوط به عنصر دلخواه شما را به تابع هدف هدایت می‌کند.

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

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

// jQuery.on( events [, selector ] [, data ], handler );
jQuery( 'table' ).on( 'click', 'td', tdClicked );
 
function tdClicked( evt ) {
	alert( $( this ).text() );
}

همان‌گونه که در مثال بالا مشاهده می‌کنید، رویداد تنها یک‌بار به عنصر table پیوست می‌شود ولی با هر کلیک روی عنصرهای داخلی از نوع td، رویداد به صورت delegate فراخوانی و متغیر this نیز به عنصر درونی اشاره خواهد کرد.

به یک شیوه‌ی دیگر نیز می‌توان به صورت ضمنی همین عملکرد را در اختیار داشت. در این روش، فیلتر کردن عنصرها به صورت دستی انجام می‌شود و با توجه به delegate نبودن رویداد، دسترسی به عنصر داخلی با استفاده از event.target به جای this ممکن خواهد بود:

jQuery( 'table' ).on( 'click', tableClicked );
 
function tableClicked( evt ) {
	if ( evt.target.nodeName == 'TD' ) {
		alert( $( evt.target ).text() );
	}
}
ارسال شده در برنامه‌نویسی, جاوااسکریپت | برچسب‌شده | ۲ دیدگاه

doT.js یک Template Engine سریع در جاوااسکریپت

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

ارسال شده در HTML, برنامه‌نویسی, جاوااسکریپت | برچسب‌شده , , | دیدگاه‌تان را بنویسید

بهینه‌سازی حجم فایل‌های PNG

یکی از فرمت‌های تصویر قابل استفاده در مرورگرهای اینترنتی PNG است. بسیاری از ابزارهای گرافیکی مانند فتوشاپ توانایی ذخیره‌سازی فایل‌های PNG را در خود دارند ولی با توجه به محدودیت زمانی و گاهی فنی، این فایل‌ها را تا بیشترین اندازه‌ی خود فشرده نمی‌کنند. با توجه به اهمیت حجم در سایت‌های اینترنتی، ابزارهای جانبی مختلفی برای بهینه‌سازی فایل‌های PNG توسعه پیدا کرده‌اند.
یکی از ابزارهای موجود که به شما کمک می‌کند حجم فایل‌های PNG را بیش از پیش کاهش دهید OptiPNG است. برای استفاده از این برنامه ابتدا بسته‌ی zip آن را دانلود کنید و محتویاتش استخراج کنید.
سپس فایلی متنی با با نام compress.cmd در کنار فایل اجرایی برنامه ایجاد کنید و قطعه کد زیر را درون آن قرار دهید.

optipng -nx -o7 -strip all %1

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

۶ آبان ۱۳۹۱
فشرده‌سازی فایل‌های png با کمک نرم‌افزار PngOptimizer

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

۵ آذر ۱۳۹۳
در جستجوهایی که انجام دادم با یک کتابخانه‌ی جدید به نام pngquant آشنا شدم. ویژگی قابل توجه این کتابخانه نسبت به دو روش قبلی این است که فایل‌های بهینه‌سازی شده با این ابزار، می‌توانند به صورت مجزا تصویر را به صورت ۲۵۶ رنگ و شفافیت تصویر را نیز با استفاده از ۸ بیت نگهداری کنند.
در حالت معمول، بیشتر نرم‌افزارهای گرافیکی از جمله فتوشاپ، امکان ذخیره‌سازی تصاویر شفاف را در این حالت فراهم نمی‌کنند و ناچار هستید که به جای استفاده از ۸ بیت برای تصویر، از ۲۴ بیت فضا استفاده کنید در نتیجه، حجم فایل‌های ذخیره شده با نرم‌افزارهایی مثل فتوشاپ به طور متوسط دو برابر خروجی pngquant خواهد بود.
برای استفاده از pngquant روش‌های مختلفی وجود دارد. برای به‌کارگیری این کتابخانه در ویندوز، نرم‌افزار PNGoo توسعه پیدا کرده که می‌توانید آن را از سایت اصلی دریافت کنید.
بدیهی است که به دلیل کاهش تعداد رنگ‌های مورد استفاده، کیفیت خروجی pngquant ممکن است اندکی از خروجی فتوشاپ کمتر باشد که معمولا در بیشتر مواقع با چشم قابل مشاهده نیست.
برای مشاهده‌ی وبسایت pngquant و دریافت نرم‌افزارهای آن اینجا کلیک کنید

ارسال شده در فناوری | برچسب‌شده , | دیدگاه‌تان را بنویسید