Skip to content
October 29, 2013 / Mohamed Amged :)

Burger Shooter Game With HTML5 Framework enchant.js

Image

Recently I developed a game with enchant.js framework, actually it’s pretty simple 2D and 3D framework, I’m using canvas for rendering.
I learned it withing a week and I developed the game within 3 hours.

-It’s cross platform (desktop,mobile[andriod, iOS, WP, Symbian….], tablet)

– Intigratable with any mobile SDK like phonegap, titanium… etc.

– High performace

– Maintainable code

You can try it with this link: https://dl.dropboxusercontent.com/u/8251919/index.htm

Advertisements
May 2, 2013 / Mohamed Amged :)

My Behance Portfolio

Lately I became a new behancer, I joined Behance creative community to share others my work, and got inspired by the creative people there.

This is My profile kindly appreciate my work http://behance.net/mamged

May 2, 2013 / Mohamed Amged :)

IE HTML5 Fallbacks (HTML5 on IE6,7,8)

Image

IE HTML5 Fallbacks

Well, I’m gonna getting the subject directly. IE is the worst thing a human being made ever over the time, especially the older versions 6,7&8. HTML5 is so cool but usefulness when you getting to adapt your site with the crappy older ie versions. I found few tools so that can handle these fallbacks, although the performance is gonna effected in an obvious way, but it’s quite solution for this problem to provide a unique user experience over the deffrent platforms and for all users. I’m really humbled to found those amazing tools.
The best tools for IE HTML5 fallbacks:
1. Video
mediaelement.js by John Dyer
swf player that mimics HTML5 media API. Consistent UI across browsers and flash. <track> support. http://mediaelementjs.com/
SublimeVideo
Amazing video player provided as a service, adapt the player according to the browser and device http://sublimevideo.net/ Read more…

October 8, 2012 / Mohamed Amged :)

WTFJS عجائب وطرئف الجافا سكربت


I was reading as usual  some blog post or some repository not sure actually I can’t remember, because what I’ve discovers got me far away of this earth. I was reading javascript like I never read before. literally I doubted myself.

I’m talking here about WTFJS blog amazing things there.

Some of these snippets are bugs in the ECMA compiler scheme, but most of snippets are so innovative and gonna blow your mind.

launch your console and try this

Code:

var foo = [0];
console.log(foo == !foo);
console.log(foo == foo);

or maybe u should try this out

Code:
"3" -+-+-+ "1" + "1" / "3" * "6" + "2"

 
have you ever got something called “fail” in javascript
then try this and you’ll see
Code:


console.log( (![]+[])[+[]]+(![]+[])[+!+[]]+([![]]+[][[]])[+!+[]+[+[]]]+(![]+[])[!+[]+!+[]] )

what about this
Code:

var Z = "constructor";
Z[Z][Z]("alert('wtfjs!')")();

 take a look at this blog and you will see javascript that u never seen before

وعلى رأي حزلقوم دا شيئ لا يتحملة بشر ولا بني ادمين ساعتك
**note: this article wasn’t revised  grammatically (yet) so I’m sorry if there is any kind of errors and I promise I’ll revise it as soon as I got some time time.

September 13, 2012 / Mohamed Amged :)

Animated Colored Background

I think it’s so pretty idea could be used with the unreadable content web pages, which has no articles like media or portfolio.

so here we go with Color animation jQuery-plugin by Edwin Martin

to get the number of required DIVs to full the page

I created some DIVs according to the equation (8*7) -1

for(var i=0;i<7*8-1;i++)

I got this equation because the width I specified is 12.5% for each DIV, that means we need 8 DIVs to full the whole page (100% of the page width) by 100/12.5, and so with the height

the minus one (-1) because of the float points which by the equation will equal one DIV

.css({‘background’:’#’+Math.floor(Math.random()*16777215).toString(16),’float’:’left’});

the above code is to get a random default background color for the new appended DIVs

so the code will looks like

Code

for(var i=0;i<7*8-1;i++)
$(‘<div class=”b”></div>’).appendTo(‘#gridcontainer’).css({‘background’:’#’+Math.floor(Math.random()*16777215).toString(16),’float’:’left’});

$(‘.b’).css({“width”:”12.5%”,’height’:’14.3%’})
setInterval(callback, 100);
function callback(){
var animTime=3000;
for(var i=0;i<5;i++)
$($(‘.b’)[Math.round(Math.random() * ($(‘.b’).length- 0)) + 0]).animate({backgroundColor:’#’+Math.floor(Math.random()*16777215).toString(16)},animTime);
};

Demo

May 17, 2012 / Mohamed Amged :)

Loading On Demand For Web and Mobile Apps

Loading On Demand For Web&Mobile Apps

النهاردة هكلمكم عن الكاش، واتمنى الموضوع يعجبكم. لو أول مره تدخل المدونة انصحك تقرأ البوست دا الأول بوست رقم زيرو
هتكلم النهاردة عن موضوع مهم جدا لأغلب الناس اللي بتشتغل على تطبيقات ويب معقدة او كبيرة
عندنا مثلا الموبيل ويب بيكون ديما عقبة كبيرة بتواجه اغلب المطورين، ان الموبيل امكانياتة محدودة للغاية حتى مع تطور الموبيل بوسيسورز الهايل لسه مشكله الاداء موجودة، طبعا بالاضافة الى مشكله الثري جي انترنت 3G internet انه بيكون ضعيف وبالتالي كل ما حجم محتويات الصفحة تزيد كل ما المشكلة تكبر، خصوصا محتويات الميديا Media Content اللي اغلبها متمثل ف الصور.
كدا مابيبقاش عند المطور حل غير انه يستعمل السيرفر لمعالجة الصورة وتصغير احجامها، ودي حاجة مرهقة جدا قد تكون مشروع قائم بذاتة مش مجرد جزء صغير من تطبيق هو بيشتغل علية، واغلب الناس بتنفض وبتحط كل حاجة زي ما هي، بالتالي متصفح الموبيل بتهنج والميموري بتزيد بطريقة غير عادية.

طب اية الحل؟؟

الحل هنا انك تستعمل الميكروداتا Microdata، طب واية الميكروداتا؟؟ هي عبارة عن html attribute بيبدأ بال prefix اللي اسمة data-
حاجة زي كدا:

<tag data-XXX=”YOUR DATA IS HERE”/>
طب هنستعملة ازاي؟؟
احنا هنشيل فيه لينكات الصور-مثلا- والداتا الخاصة بيها
حاجة زي كدا:
<div id=”test” data-picsRefs=”/pic1.png,/pic2.png,/pic3.png” ></div>
عن طريق جافاسكربت كود بسيط هنقدر نعمل parsing للداتا دي ونضيفها للصفحة وقت الحاجة فقط
كود:

var getImages = function(element) {
var data = $(element).attr(‘data-images’);
var paths = data.split(‘,’);
var html = ”;

for(var i = 0; i < paths.length; i++) {

html += ‘<img src=”‘ + paths[i] + ‘”/>’;

}

$(element)[0].innerHTML = html;

};

$(‘div.gallery’).each(function() {

getImages(this);

});

انا استخدمت ال jquery هنا عشان الحياة سهلة معاها، انا قريت الداتا من التاج وحطيتهم ف ارااي عن طريق الكود دا
كود:

var data = $(element).attr(‘data-images’);

var paths = data.split(‘,’);

بعد كدا عملت تاج صورة وعملت لووب عشان تحط كل لينك ف تاج وتعمله append ف الصفحة

كود:
for(var i = 0; i < paths.length; i++) {

html += ‘<img src=”‘ + paths[i] + ‘”/>’;

}

$(element)[0].innerHTML = html;

انتا ممكن تستخدم الاسلوب دا عشان تعمل لودينج لأي حاجة ممكن يكون فايل جافاسكربت او سي اس اس او حتى انيميشن معين يتنفذ لحاجة موجودة ف الصفحة او حاجة هتحملها بالاسلوب دا ف الصفحة.

April 21, 2012 / Mohamed Amged :)

HTML5 Cache

HTML5 Cache
النهاردة هكلمكم عن الكاش، واتمنى الموضوع يعجبكم. لو أول مره تدخل المدونة انصحك تقرأ البوست دا الأول بوست رقم زيرو
مقدمة
التوجه العام دلوقتي هو جعل الweb-based apps تكون accessible offline، كل المتصفحات دلوقتي بتوفر طرق متعددة للكاشينج بس للأسف مش بيشتغلوا بطريقة مستقرة اقدر اعتمد عليها ف بناء تطبيق قوي، دلوقتي الHTML5 بتوفرلنا واجهات برمجيه مالهاش حل عشان اتعامل مع الكاشينج على كل البراوزرز.
استخدام الكاشينج هيوفرلك:
  1. offline browsing كدا يا معلم اليوزر يقدر يتصفح موقعك بشكل كامل بدون اي حاجة للإنترنت
  2.  speed الكاش بيكون متخزن ع الجهاز عندك بالتالي هيكون اسرع جدا ف اللوودينج
  3.  reduce server load الكاش بيخلي السيرفر يشتغل بأقل قدر ممكن لأنه مابيعملش لوود هنا غير للحاجات اللي اتغيرت ف الصفحة
الكاش بيخليك تحدد بالظبط الفيلات اللي هيتعملها كاشينج والفيلات اللي بتتغير.
ال manifest file
ودا فيل بسيط جدا بتكتب فيه كل الفيلات او الريسورسيز ايا كان نوعها صفحات، صور، فيديو، صوت او فيلات جافاسكريت.
طب ازااي اعمل الفيال ده؟؟؟
اولا لازم تعمله انكلود ف الhtml tag
<html manifest=”example.appcache”>
</html>
وهتحط الattribute دا ف كل صفحة لها ريسورسز محتاج تعملها كاش، كمان ممكن يبقى الفايل دا موجود ف لينك معين زي كدا:
</html>
بالنسبة لإمتداد الفايل دا، ماتحيرش نفسك حط اي امتداد انتا عاوزة مش فارقة خالص
احيانا بتحتاج تضيف حاجة على فايل ال .htaccess ف السيرفر، بس احيانا كتير مابتحتاجش ف اغلب السيرفرات
بحط الكود دا ف فايل ال .htaccess
AddType text/cache-manifest .appcache
وبتغير كلمة .appcache على حسب الامتداد اللي انتا عامله للفايل بتاعك
طب احط اية ف فايل الكاش؟؟؟؟
اخبط دا:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js

بتبدأ الفايل بكلمة CACHE MANIFEST وبعدها يابرنس حط اسامي الريسورسز اللي انتا عايزها
اقصى حجم للكاش هو 5 ميجا للمواقع، اما لو بتعمل اضافة لأحد المتصفحات او native mobile based web app بيكون غالبا الحجم غير محدود.
مثال متقدم حبتين:
CACHE MANIFEST

# 2010-06-18:v2

# Explicitly cached ‘master entries’.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi
http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

كلمة FALLBACK:
ودي بنستخدمها عشان نظهر لليوزر صفحة معينة معمولها كاشينج عنده
كلمه NETWORK:
ودي بقى يا معلم  :D بتحددله فيها الصفحات اللي بتطلب وجود اليوزر اونلاين زي صفحات ال login
كدا انتا خليت الصفحة موجودة ف الكاش عندك ف البراوزر وهتفضتتعرض لليوزر بنفس الشكل لحد ما يحصل حاجة من ال3
  1.  اليوزر يمسح الكاش من البراوزر
  2.  فايل المانيفيست اللي عند اليوزر يتبدل، ملحوظة لو غيرت المانيفيست اللي ع السيرفر دا مش معناه ان كدا الكاش عند اليوزر اتغير
  3.  واخيرا انك تكون مظبط الصفحات اللي معمول لها كاش برمجيا(جافاسكربت) انها تبعت ريكويست تشوف لو الفيل اتغير عند السيرفر، ودا هنشوفه دلوقتي
اخبط دي:

var appCache = window.applicationCache;appCache.update(); // Attempt to update the user’s cache.
if (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // The fetch was successful, swap in the new cache.
}

الكود دا بيعمل check على المانيفيست عند السيرفر ولو لاقاه مختلف عند الموجود عند اليوزر هيبدله القديم بالجديد ويعمل كاش للحاجات الجديدة ويمسح الحاجات اللي ماعدتش ف الكاش

References
http://www.whatwg.org/specs/web-apps/current-work/#applicationcache