My first plugin on wordpress.org: Redirect to welcome or landing page

WordPress Plugins

WordPress is a great, flexible and powerful  CMS from my point of view it is the best and i see it is not only me as wordpress powers 23% of the internet, Plugins have a big hand of that powerfulness that wordpress have.

I have used and created plugins for many years now but the strange thing i have not try to publish any of them on the official store of wordpress.org ! not even my latest plugins WordPress static social sharing icons that i developed and use also in this site to speed up the page loading time !!

Today after two days in review i have got the “Request Approved” Email form wordpress.org on my plugin “Redirect to welcome or landing page“, its now live on wordpress.org and you can find it if you searched for “Redirect to welcome or landing page” in your plugins section in your website.

The plugin is easy, simple to the point plugin allow you to set page so users get redirected to it if they landed on your home page or any page or post. It is as simple as that whenever you get new visitor to your home page you may like to redirect him to a welcome o landing page that you promote your work in or give him some offer or ask for his email to join your newsletter.

The plugin have many use cases and a lot great bloggers have used the same concept to get more leads to there news letter of to spotlight there latest work and you to can get the advantage of it by going now to your plugins section in your wordpress site and searched for “Redirect to welcome or landing page”.

The plugin use temp redirection code so search engine will not lose track of your home page content.

Waiting all your feedback, one last time the link is “Redirect to welcome or landing page“.

Comments button Twitter button Facebook button LinkedIn button Google+ button

How to force the client’s browser to clear cache files

keep calm and clear cache

I will write more technical posts on this blog but it will be in English, today’s post will be about common problem when you develop web application depend a lot on JavaScript or changes in design when you release its.

The problem:
You released new version from your site with changes in JavaScript and CSS but the users did not got that changes because the browser cached those files.

The solution:
Add suffix to all JavaScript and CSS files with release date in time stamp format like

<link href="css/main.css?1422439996" rel="stylesheet">

With the considerations that most if not all modern frameworks loads the JavaScript and CSS automatically from single function that you can alter to append the release date time stamp and recommended to read it from config file as it may be part from installation steps.

Explanation:
You have the file main.CSS in your web page and have been cached before when the user visited your web page so when you update the file content the browser will check only on the file name and it not be changed so will use the old cached file.
But when you add the release date as suffix when the user visit your page after the release date the browser will detect new file name so will load it and then cache it till the next release.

Whats next?
The next this is to go and talk with your team on how can you deploy this, if you needed farther details you can contact me directly or in the comments section. Don’t forget the most important thing subscribe to my news letter to get the upcoming posts directly in your mailbox and share this article to help others.

Comments button Twitter button Facebook button LinkedIn button Google+ button

Does your Ajax requests take long time? it’s PHP session locking problem – updated

logo php sessionHello All,

That is the 9th\10th post in my challenge for 30 days of blogging and this post have been delayed because i was insisting on writing it in Arabic and its a technical post trying to document a technical solution for Ajax requests that take long time, That problem when i started on the blog post in Arabic i found difficulty in describing it and the solution with the right words so here it is in English.

The article require understanding of PHP Sessions and Ajax i will incloud definitions of them to make it easy for the ones who starting in PHP.

What is PHP session ?

Imagine you are developing a web application and want to recognize the user and remember who he is in all the pages without making him enter his details in every one, you may use Cookies or Session.

You get the point now Session is a way of storing users info and can recall it from any page, unlike Cookies Session stored on the server so user have no way of editing it.

By default session variables last until the user closes the browser or stay inactive for sometime defined in the server configurations, Whenever you want to recall or store user data in PHP page you must start the page with calling session_start() function so you know will have access on $_SESSION variable.

What is AJAX?

AJAX stands for Asynchronous JavaScript and XML. Is the way of sending and receiving data from a server without reloading the full page.

We use that method to send data and retrieve info from the server in faster way as we don’t want to receive the full page and render it in the browser as it will be much slower.

As result we can update part from the web page user on like what users see when they scroll down in facebook time line page as new content get added without refreshing the page.

The problem

We now -and it is not a new thing- develop applications depend on Ajax up to %100 But when a web page sends two or more Ajax requests you find them take mush time and maybe finish almost in the same time.

The cause

When you send an Ajax request to a server and your PHP script starts with

session_start();

then that call and lock the PHP session file on the server and as you know PHP store sessions in files on server, so the same script can not edit the same session file on the server, and that is a classic lock file condition, so any other request will call PHP file that call session_start() will wait till the first request finish to start first in first out and now most if not all PHP frameworks use session_start() as first thing in the main file.

The solution

session_write_close();

Using session_write_close() function to write and close the session file on the server will release the session file so another request can use it and this script will continue working normally but you should know that you are not allow to store any thing in the session after using session_write_close(); in the same script but from the other request it will be ok.

Update:

I have created a test code to see the problem ad uploaded it on GitHub you can find it here ” PHP session locking problem with Ajax” you will need to add it under your local host and open the console to see the requests  and responses time.

As we see in the code in that file, for example if we made more than request the a page have that code

session_start();
sleep(5);

Each request will wait the previous one to finish which will take 5 sec, because the session file have not be released yet so the new connected will be blocked on the first like session_start() that will kill the idea if asynchronous requests (more than one request can be send and executed in the same time).

If we changed the code to be like in that file

session_start();
session_write_close();
sleep(5);

the second line in that code release the session file so the other requests now can start executing as they can call session_start() without any problems.

Happy coding :) till the next post remember to subscribe to the blog RSS feed and follow me on twitter.

Image source: codeinphp.com
Comments button Twitter button Facebook button LinkedIn button Google+ button

كيف تقلل من عدد الطلبات requests في صفحتك الالكترونيه بنسبة 39% لتقلل الوقت المطلوب لتحميل موقعك – الجزء الثاني

WordPress Plugins

السلام عليكم

تلك هي التدوينه السابعة/الثامنة حيث كتبت في اليوم السابع و تم تعديلها في اليوم الثامن بدلا من كتابه جزء ثالث لها هذا ضمن تحدي التدوين لمدة 30 يوم  وكما وعدت أن في الفترة القادمة ستتخذ التدوينات طابع تقني أكثر اليوم اكمل الجزء الثاني لتدوينه أمس عن كيف يمكن تقليل عدد الطلبات التي ترسلها صفحات موقعكم بنسبة 39% عبر استبدال أزرار المشاركة التي طورتها الشبكات الاجتماعية -أزرار الإعجاب من فيسبوك و تويتر …- بروابط مشاركة ثابتة لمشاركة المحتوي علي تلك الشبكات, و بالتالي تقليل الوقت اللازم للانتهاء من تحميل صفحات موقعكم.

امس كنت كتبت الأكواد ألازمه لذلك ولكن بملاحظتها  يمكنك أن تستنج أن يجب أضافه تلك الأكواد بشكل يدوي داخل صفحات القالب الخاص بمدونتك إذا كنت نتحدث عن مدونه ووردبريس (ووردبريس هو برنامج لإنشاء وإدارة المدونات، أو ما يسمى باللغة الإنجليزية Blog أو Weblog، وهو برنامج حر ومجاني، يمكنك استخدامه وتعديله ونسخه كما تشاء،) وهوا البرنامج الذي أستخدمه في مدونتي هذه , إما إذا كنت تستعمل صفحات مبرمجه بشكل خاص لك يمكنك إضافة تلك الأكواد بشكل مباشر مع مراعاة تعديل المسار الذي تتواجد فيه الصور.

بالعودة للحديث عن الوردبريس قمت بإنشاء إضافة لاستخدامها مع أي قالب تستعمله في مدونتك الإضافة في مراحلها الأولية وسيتم أضافه بعض الخصائص عليها حتي الآن ما تقوم به الإضافة هوا أضافه سطر يحتوي علي أيقونات كل من فيسبوك, تويتر, لنكدان و جوجل+ بالإضافة إلى رابط للتعليقات. كما هوا مبين بالصورة

social

الإضافة تعتمد علي داله function واحدة هي ما تقوم بإضافة المحتوي المكتوب مسبقا في داخل الإضافة و إضافة الأزرار تكون وقت الاستعراض كل مره أي لا يتم حفظ تلك الأزرار في قاعدة البيانات, و هذا هوا الكود الخاص بتلك ألداله

//check if the function was not already defined
if( !function_exists("eslam_me_wordpress_post_suffix")){
function eslam_me_wordpress_post_suffix($content){
$post_link = get_permalink($GLOBALS['post']->post_id);
$post_title = $GLOBALS['post']->post_title;
$suffix = '
<div class="eslam_me_wordpress_post_suffix">
<a target="_blank" href="' . $post_link . '">
<img style="margin: 0 5px;" alt="Comments button" src="'.plugins_url( 'images/comments.png', __FILE__).'">
</a>
<a target="_blank" href="https://twitter.com/intent/tweet?text=' . $post_title . ' by @eslam_mahmoud&url=' . urlencode($post_link) . '">
<img style="margin: 0 5px;" alt="Twitter button" src="'.plugins_url( 'images/twitter.png', __FILE__).'">
</a>
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=' . urlencode($post_link) . '">
<img style="margin: 0 5px;" alt="Facebook button" src="'.plugins_url( 'images/facebook.png', __FILE__).'">
</a>
<a target="_blank" href="http://www.linkedin.com/shareArticle?url=' . urlencode($post_link) . '&title=' . $post_title . '&summary=' . $post_title . '">
<img style="margin: 5px;" alt="LinkedIn button" src="'.plugins_url( 'images/linkedin.png', __FILE__).'">
</a>
<a target="_blank" href="https://plus.google.com/share?url=' . urlencode($post_link) . '">
<img style="margin: 0 5px;" alt="Google+ button" src="'.plugins_url( 'images/googleplus.png', __FILE__).'">
</a>
</div>
';
//to change the posts only
if( !is_page( ) ){
// append the $suffix text to the end of `the_content`
return $content . $suffix;
} else{
return $content;
}
}
//add our filter function to the hook
add_filter('the_content', 'eslam_me_wordpress_post_suffix');
}

 كما هوا ملاحظ لمن لديه خبرة في تطوير الإضافات للوردبريس الإضافة تعتمد علي مجموعة من الصور موجودة في نفس المجلد الخاص بالإضافة تحت مجلد آخر اسمه images ويمكنكم أستبدال تلك الصور بالصور التي تريدون و موجود نسخ عن تلك الصور في مجلد الإضافة علي GitHub. الإضافة تعمل علي إضافة أزرار الشبكات الاجتماعية للتدوينات فقط ولا تعمل علي الصفحات و تضيفها لهم في صفحة التدوينه أو داخل ما يعرف بالـ loop.

يمكنكم تحميل الإضافة من علي GitHub و سيتم تطويرها إن شاء الله لتحمل المزيد من الخصائص و إضافتها علي الموقع الرسمي لوردبريس, حتي هذا الوقت لمتابعه باقي التدوينات في التحدي يمكنك متابعة المدونة من خلال الـ RSS او متابعتي علي تويتر @eslam_mahmoud

الصورة من onlinemediamasters.com
Comments button Twitter button Facebook button LinkedIn button Google+ button

كيف تقلل من عدد الطلبات requests في صفحتك الالكترونيه بنسبة 39% لتقلل الوقت المطلوب لتحميل موقعك

 requests-57

السلام عليكم

تلك هي التدوينه السادسة في تحدي التدوين لمدة 30 يوم و اليوم أريد أن أتحدث في الفترة القادمة بشكل تقني أكثر, و اليوم في عصر الشبكات الاجتماعية و عدد الـ Likes هوا الحاكم لمدي انتشار الأخبار و المحتوى الإلكتروني و الكل يسعى للمزيد منه لذا الجميع يسعى لأضافه أزرار المشاركة من الشبكات الاجتماعية المختلفة تويتر, الفيسبوك و لنكدان… ربما أيضا بنترست و كل الشبكات الاجتماعية الأخرى و أضافه المزيد و المزيد من تلك الأزرار يعني أضافه المزيد من الوقت المطلوب للانتهاء من تحميل صفحة موقعك.

كنت استخدم تلك الأزرار من قبل في مدونتي هذه وكنت أتابع المدة و عدد الـ requests التي يتم إرسالها من الصفحة لخوادم الشبكات الاجتماعية المختلفة و وجدت صفحة عادية مثل تدوينه “تحدي التدوين لمدة 30 يوم” كانت ترسل حوالي سبع و خمسون طلب لمختلف الخوادم, اعتبرت هذا الرقم كبير و عملت علي تقليصه حتي وصلت إلي خمس و ثلاثون أي اقل بنسبة 39% من الرقم الأول كيف كان هذا مع الحفاظ علي أتاحه الفرصة للزوار لمشاركة محتوي الموقع علي الشبكات الاجتماعية؟

الفكرة في أستبدال تلك الأزرار التي تعطيها الشبكات الاجتماعية ب مجموعة من الصور مستضافة علي نفس الخادم server الذي يستضيف موقعي و أضافه رابط لمشاركة التدوينه علي الشبكات الاجتماعية حيث لكل شبكة رابط إذا ضغط علية يتم مشاركة المحتوي علي تلك الشبكة الاجتماعية, تذكر أن تستبدل رابط موقعي http://eslam.me برابط موقعك و أيضا الصورة بالصور المناسبة

فيسبوك

<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://eslam.me">
<img style="margin: 0 8px; vertical-align: middle;" alt="Facebook button" src="http://eslam.me/wordpress/wp-content/uploads/2014/12/facebook_32.png">
</a>

تويتر

<a target="_blank" href="https://twitter.com/intent/tweet?text=Eslam Mahmoud by @eslam_mahmoud&url=http://eslam.me">
<img style="margin: 0 8px; vertical-align: middle;" alt="Twitter button" src="http://eslam.me/wordpress/wp-content/uploads/2014/12/twitter_32.png">
</a>

لنكدان

<a target="_blank" href="http://www.linkedin.com/shareArticle?url=http://eslam.me&title=Eslam Mahmoud&summary=Eslam Mahmoud">
<img style="margin: 8px; vertical-align: middle;" alt="LinkedIn button" src="http://eslam.me/wordpress/wp-content/uploads/2014/12/linkedin_32.png">
</a>

جوجل+

<a target="_blank" href="https://plus.google.com/share?url=http://eslam.me">
<img style="margin: 0 8px; vertical-align: middle;" alt="Google+ button" src="http://eslam.me/wordpress/wp-content/uploads/2014/12/googleplus_32.png">
</a>

 

requests-35

قد لا تكون النتيجة النهائية مثل أزرار الشبكات الاجتماعية الأساسية ولا تعرض عدد الضغطات لكن لكل منهم مميزاته و عيوبه ويمكن أن يكون هناك جزء أخر من تلك التدوينه نقوم فيه بتطوير طريقه العرض, حتي هذا الوقت يمكنك متابعة المدونة من خلال الـ RSS او متابعتي علي تويتر @eslam_mahmoud

Comments button Twitter button Facebook button LinkedIn button Google+ button

تطوير نسخة من لعبة 2048 باستخدام Javascript

2048 game

السلام عليكم و رحمة الله.

في البداية لعبة 2048 هي لعبة منتشرة علي الأنترنت تقوم علي مبدا جمع الأرقام حتي تصل إلى رقم 2048  لمن لا يعرفها يمكنك ان تجربتها سريعا علي http://eslam.me/2048 اللعبة انتشرت بشكل كبير علي الويب و الهواتف المحمولة و يوجد منها عده نسخ الي الان من اشهرهم (لا اعلم هل هي أولهم ام لا) نسخة المطور  Gabriele Cirulli التي حسب قولة اقتبسها من 1024 by Veewo Studio وتشابه كثيرا في المبداء لعبة Threes by Asher Vollmer, قد ثار جدل كبير حول نسخ اللعبة و خصوصا من الأخير Asher Vollmer لكن دعونا من كل هذا.

منذ ان علمت عن اللعبة وشهرتها الغريبة بالنسبة لبساطتها -تذكرني بـ flappy bird- بدت غريبة بعض الشيء و شيقة للتجربة حتي جاء يوم سفر لمناسبة في القاهرة و انا في الإسكندرية يأخذ الطريق عادتا 3 ساعات و كانت اول مرة اجرب فيها اللعبة, لعبتها بعض الوقت حتي وصلنا القاهرة ثم كانت رحلة العودة حينها اخرجت الهاتف حتي اعود للعبة لكن ما كان يشغلني طوال الوقت في هذا اليوم هوا مدى انتشارها و سهولة تطويرها… لا يمكن ان تكون مطور مواقع او مبرمج ولا تفكر اذا كيف يمكنني ان افعلها :D وهذا ما كان, في رحلة العودة بدائت بكتابة pseudo codes للخوارزمية اللازمة لعمل اللعبة.

حين تفكر في اللعبة تجدها بسيطة من حيث التكوين و المهام التي تقوم بها و يمكننا حصرها في

  • ظهور مربع في مكان عشوائي فارغ بقيمة عشوائية تساوي 2 او 4
  • تحريك المربعات الممكن تحريكها
  • جمع المربعات بعد تحريكها اذا كانت قابلة للجمع
  • التاكد من هل هناك فرصة للحركة ام انتهت اللعبة
  • أعادة جميع المتغيرات لقيمتها الأساسية و بداية اللعبة من جديد

بدائت في كتابة الخوارزمية الخاصة بحركة المربعات في اللعبة اذا أشار اللاعب الي اي اتجاه, ثم عملية جمع الأرقام و جميع ما سبق بشكل مبداي, استعنت بتطبيق لحفظ الملاحظات علي الموبايل في الكتابة و استغرقت في هذا طوال طريق العودة, هكذا انقضت 3 ساعات في تطوير خوارزمية اللعبة الأساسية ثم عندما عدت إلى الإسكندرية بعدها بيوم عملت قليلا علي تطوير اللعبة ثم بعدها بيومين حللت احد المشاكل الخاصة بحسابات اللعبة و هكذا انتهيت من تطوير أساس اللعبة في ما يقارب 6 ساعات. بعدها اخذت بعض الوقت لأضافه التصميم البسيط الموجود حاليا و استعنت بمكتبة bootstrap, أضفت خاصية جديدة وهي التحكم في حجم رقعة اللعب حيث اللعبة الأساسية تتيح اللعب في مساحة 4*4 فقط ولكن الآن الخيار متاح للاعب أن يوسع رقة اللعب إلى 10*10 ولكن مع زيادة عدد المربعات الشوائية التي يتم إضافتها مع كل حركة.

الآن اللعبة متوفرة للاستخدام علي الرابط http://eslam.me/2048  للتجربتها و ايضا الـكود الخاص باللعبة متوفر علي موقع GitHub https://github.com/eslam-mahmoud/2048 ادعوا الجميع لتجربة اللعبة و إبداء الآراء و المشاركة في تطويرها. الخطوة القادة أضافه دعم للأجهزة المحمولة  التي تعمل باللمس و اضافة تاثير حركي افضل للمربعات ثم تدوينه تشرح كود اللعبة.

Comments button Twitter button Facebook button LinkedIn button Google+ button