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

تطوير نسخة من لعبة 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