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 و دریافت نرم‌افزارهای آن اینجا کلیک کنید

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

ایجاد فیلد‌های محاسبه شده در مدل‌های Laravel

ارسال شده در ۲۸ آبان ۱۳۹۳ توسط امیرمسعود ایرانی

در هنگام استفاده از اطلاعات ذخیره شده در پایگاه داده، ممکن است برخی از داده‌ها پیش از استفاده نیاز به پردازش یا محاسبات خاص داشته باشند.
برای مثال ممکن است بخواهیم نام کامل فرد که ترکیبی از «عنوان فرد»، «نام کوچک» و «نام خانوادگی» است در اختیار داشته باشیم.
یا ممکن است تاریخ تولد یک فرد را که به صورت میلادی در پایگاه داده ذخیره شده، به صورت شمسی دریافت کنیم.
یا ممکن است بخواهیم URL یک فایل را که تنها نام آن در بانک اطلاعاتی نگهداری می‌شود را به دست آوریم.
در تمامی موارد بالا و موارد مشابه، فیلدهای محاسباتی یکی از بهترین روش‌ها برای دستیابی به هدف هستند.
پیاده‌سازی فیلدهای محاسباتی در Eloquent به سادگی امکان‌پذیر است.

برای این منظور کافی است تا به ازای هر فیلد، یک تابع با پیشوند get و پسوند Attribute درون مدل ایجاد کنیم. نام فیلد محاسباتی جدید نیز باید به صورت CamelCase میان پیشوند و پسوند قرار بگیرد. برای نمونه یک فیلد محاسباتی با نام full_name به صورت زیر تعریف می‌گردد:

<?php
public function getFullNameAttribute() {
	return "{$this->title} {$this->fname} {$this->lname}";
}
?>

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

<?php
echo $user->full_name;
?>

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

برای اینکه Eloquent مقدار این فیلد جدید را به همراه آرایه‌ها و JSON، محاسبه کند، می‌بایست داخل مدل این دستور را به صورت صریح درج کنید.

<?php
protected $appends = array( 'full_name' );
?>

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

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

با پیدا شدن اشکال امنیتی جدی، SSL 3.0 به پایان خود رسید

ارسال شده در ۲۴ مهر ۱۳۹۳ توسط امیرمسعود ایرانی

دو روز گذشته( ۲۳ مهر ۱۳۹۳ ) گروهی از کارشناسان گوگل اشکالی امنیتی در پروتکل امنیتی SSL 3.0 پیدا کردند که باعث می‌شود افراد مهاجم بتوانند اطلاعات کدشده میان سرور و مرورگر را بخوانند.
این اشکال امنیتی Poodle نام گرفته و برای رفع آن هیچ راه حلی به جز غیرفعال کردن SSL 3.0 روی مرورگر وجود ندارد.
موزیلا اعلام کرد که در نگارش ۳۵ فایرفاکس این پروتکل را به طور کلی غیرفعال خواهد کرد. گوگل نیز اعلام کرد برنامه دارد تا این پروتکل را در آینده‌ای نزدیک از کروم حذف کند.
از دید فنی، مهاجمینی که در شبکه‌ی داخلی شما باشند، می‌توانند با انجام تغییراتی در درخواست‌های ارسال شده و ارسال درخواست‌های مکرر بعدی، اطلاعات حساسی مانند cookieهای مرورگر شما را کشف کنند.
مطابق بررسی‌های مشترک موزیلا و دانشگاه میشیگان، با غیرفعال کردن SSL 3.0 حدود ۰.۳ درصد سرورهای موجود در اینترنت همچنان از این پروتکل که توسعه‌ی آن به دو دهه‌ی گذشته برمی‌گردد وابسته هستند و غیرفعال کردن SSL 3.0 سبب می‌شود دسترسی به این سرورها غیرممکن شود.
از طرف دیگر، تنها مرورگری که از نگارش‌های جدیدتر پروتکل امنیتی به نام TLS پشتیبانی نمی‌کند، Internet Explorer 6.0 است.

راه حل موقتی

در حال حاضر به شیوه‌های مختلف می‌توانید استفاده از این پروتکل را در مرورگر خود غیرفعال کنید.
موزیلا یک افزونه‌ی جدید را منتشر کرده که شما را در انجام این کار یاری می‌رساند.
گوگل کروم نیز با دستور خط فرمان ‎–ssl-version-min=tls1 پشتیبانی از SSL 3.0 را غیرفعال می‌کند.

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

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

AngularJS چیست؟

ارسال شده در ۱۶ مهر ۱۳۹۳ توسط امیرمسعود ایرانی

AngularJS

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

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

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

نخستین گام ایجاد یک Application جدید است که با مقداردهی به صفت «ng-app» شدنی است:

<div ng-app>
</div>

هر تگ حاوی صفت «ng-app» حاوی یک Application است. برای سازگاری با HTML5 می‌توانید صفت‌های AngularJS را که با پیشوند ng‌ آغاز می‌شوند با پیشوند data-ng آغاز کنید

پیوند دادن اطلاعات ورودی و خروجی

<div data-ng-app>
	<label>نام:</label>
	<input type="text" data-ng-model="yourName" placeholder="نام خود را وارد کنید">
	<p>سلام {{yourName}}!</p>
</div>

پس از تعریف فیلدهای ورودی و خروجی، کافی است تا فایل اسکریپت AngularJS را در سرآمد یا انتهای فایل HTML بارگزاری کنیم:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>

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

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

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

ارسال شده در ۱۰ شهریور ۱۳۹۳ توسط امیرمسعود ایرانی

تبدیل تاریخ میلادی به شمسی و شمسی به میلادی آنلاین

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

برای استفاده اینجا کلیک کنید
jfndg jhvdo

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

طراحی قالب دروپال

ارسال شده در ۲۰ مرداد ۱۳۹۳ توسط امیرمسعود ایرانی

drupal logo
در این مقاله مراحل ایجاد یک قالب برای سیستم مدیریت محتوای دروپال را به ترتیب مرور خواهیم کرد
فرض بر این است که خواننده با اصول طراحی سایت مانند html، css و جاوااسکریپت آشنایی قبلی دارد و تنها مواردی که به drupal مرتبط می‌شود در این مقاله مورد بحث خواهند بود.

گام نخست ایجاد یک شاخه در مسیر sites/all/themes است. چنانچه بخواهید این قالب تنها در یک سایت قابل دسترس باشد از مسیر sites/YOUR-SITE/themes استفاده کنید.
به عنوان یک پیشنهاد، بهتر است شاخه‌هایی برای نگهداری فایل‌های شیوه‌نامه، تصاویر و اسکریپت‌ها ایجاد کنید تا دسترسی و یافتن این فایل‌ها آسان‌تر شوند.
گام بعدی ایجاد یک فایل متنی با پسوند info است. نام این فایل باید مشابه نام شاخه‌ای باشد که برای قالب جدید انتخاب کرده‌اید. این فایل حاوی تنظیمات مربوط به قالب جدید است که دروپال از آن برای موارد مختلفی استفاده می‌کند.
یک نمونه از فایل تنظیمات info را در ادامه مشاهده می‌کنید

name = AMIB Drupal Theme
description = Custom theme for my site
core = 7.x
engine = phptemplate
 
regions[header] = Header
regions[sidebar_first] = Right sidebar
regions[content] = Content
regions[footer] = Footer
 
stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
 
features[] = name
features[] = main_menu

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

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

CSRF چیست؟

ارسال شده در ۱۱ مرداد ۱۳۹۳ توسط امیرمسعود ایرانی

CSRF مختصر عبارت Cross-site request forgery و یک اشکال امنیتی در برنامه‌نویسی وب است.
CSRF گاهی با واژه‌ی XSRF نیز شناخته می‌شود.

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

چنانچه فرد هدف در سایت ناایمن Login باشد و cookieهای آن سایت روی مرورگر او تنظیم باشند، کلیک روی لینک ارسال شده توسط هکر می‌تواند اهداف هکر را اجرایی کند. مثلا مبلغی از حساب وی کسر کند و به حساب هکر واریز کند.

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

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

نکته‌های امنیتی برای برنامه‌نویسان

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

نکته‌های امنیتی برای کاربران

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

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

آشنایی با Twig PHP Template Engine

ارسال شده در ۲۴ تیر ۱۳۹۳ توسط امیرمسعود ایرانی

Twig PHP Template Engine

در این مطلب کوتاه تلاش می‌کنیم در زمانی کوتاه با Twig Template Engine آشنا شویم.

یک قالب Twig فایلی متنی است که برای تولید هرگونه محتوا( HTML, CSS, Javascript, XML, CSV, LaTeX, … ) به کار می‌رود. عناصر به کار رفته در یک قالب Twig با علامت‌های زیر از بقیه‌ی عناصر محتوا جدا می‌شوند:

  • {{ … }}: برای چاپ محتوای یک متغیر یا نتیجه‌ی یک محاسبه به کار می‌رود.
  • {% … %}: برای انجام عملیات منطقی به کار می‌رود. مثلا ایجاد حلقه‌ها یا محدوده‌های شرطی با کمک این علامت به انجام می‌رسد.
  • {# … #}: برای درج توضیحات درون کد به کار می‌رود.

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

ارسال شده در PHP | برچسب‌شده , | ۴ دیدگاه

افزونه‌ی فارسی‌ساز وردپرس با بهینه‌سازی و رفع اشکال

ارسال شده در ۱ تیر ۱۳۹۳ توسط امیرمسعود ایرانی

وردپرس فارسیهنگامی که داشتم این وبلاگ را راه‌اندازی می‌کردم متوجه شدم افزونه‌ی فارسی‌ساز وردپرس «wp-jalali» با افزونه‌ی «wp-syntax» تداخل دارد و مانع عملکرد صحیح آن می‌شود
به همین دلیل کد منبع هر دو افزونه را بررسی کردم.
اشکال اصلی از عبارت‌های منظمی بود که در شناسایی و تبدیل اعداد فارسی به کار رفته بود
علاوه بر الگوریتم نامطمئن، بار سنگینی را نیز به سرور وارد می‌کرد

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

چنانچه مایل باشید می‌توانید افزونه‌ی تغییریافته را از این پیوند دریافت کنید

برای مشاهده‌ی شکل عملکرد افزونه‌ی تغییر یافته می‌توانید همین وبلاگ را بررسی کنید

به‌روزرسانی – ۱۴ دی ۱۳۹۱

آخرین تغییرات اعمال شده در نگارش ۴.۴ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

به‌روزرسانی – ۱۷ آبان ۱۳۹۲

آخرین تغییرات اعمال شده در نگارش ۴.۵ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

به‌روزرسانی – ۱۱ دی ۱۳۹۲

آخرین تغییرات اعمال شده در نگارش ۴.۵.۱ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

به‌روزرسانی – ۱ تیر ۱۳۹۳

آخرین تغییرات اعمال شده در نگارش ۴.۵.۲ افزونه‌ی اصلی در نسخه‌ی بهسازی شده نیز پیاده‌سازی شد.

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