breakpo

Some pitfalls for using PWA and ServiceWorker I hoped I knew before - So I am writing them here so maybe others will get to rid them before or I can find them again when I'll need them again. This is not a tutorial for PWA, ServiceWorker. Those are just a few points that I encountered while developing a PWA ( Progressive Web App ) and ServiceWorker using Vanilla JavaScript and caching mechanism for Offline usage. There are plenty of good PWA ServiceWorker Caching tutorial on the internet. Full Vanilla JavaScript code is attached all the way at the bottom Double caches: First, the cache made by the cache mechanism which you as a coder decide what will be saved in this cache using the cache.addAll() command. And the second cache is the one the browser automatically caches for example images and javascripts code or others. Hence might be that when you work offline the browser will return cached images which you did not stated that should be cached only because the browser cac...

var all = document.querySelectorAll('*'); for(var i = 0; i < all.length; i++) {if(all[i].style.zIndex > 0) {console.log(all[i].style.zIndex); console.log(all[i]);}}

Clone, Parse and Stringify JavaScript objects using JSON.parse and JSON.stringify without loosing functions in deep object: function localStringify(obj) {              return JSON.stringify(obj, function(key, val) { return (typeof val === 'function') ? val.toString() : val; }); } function localParse(str) {     return JSON.parse(str, function(key, val) { return (typeof val === 'string' && val.substring(0,8) === 'function') ? eval('(' + val + ')') : val; });         }   function cloneObject(obj) {     if (obj === null || typeof obj !== 'object') {                 return obj;    }             var temp = obj.constructor(); // give temp the original obj's constructor     for (var key in obj) {      ...

רבים וטובים (וגם אני) משתמשים ב - setTimeout או setInterval בשביל ליצר אנימציה ב - HTML5 JavaScript עם Canvas Tag. מתכנתים ותיקים בוודאי זוכרים את Vertical Sync שהיינו משתמשים ב - Assembler בכדי להשיג תנועה חלקה. לאחרונה גיליתי יכולת חדשה של ה - browser בכדי לספק לנו דבר דומה בתכנות JavaScript ב- HTML5 עבור Canvas. במקום להשתמש ב - setIntrerval / setTimeout ניתן להשתמש ב - requestAnimationFrame אשר קורא לפונקציית הציור של התמונה בקצב המהיר ביותר האפשרי מבחינת ה - browser. הנה השימוש, בכדי להשיד תמיכה בכל הדפדפנים: var animationFrame = window.requestAnimationFrame ||  window.webkitRequestAnimationFrame ||  window.mozRequestAnimationFrame ||  window.oRequestAnimationFrame ||  window.msRequestAnimationFrame ||  null ; לפוסט המקורי

שיחקתי קצת עם HTML5 Canvas וכמובן JavaScript וזה מה שיצא: להורדה לכרום - עובד גם ללא חיבור לאינטרנט: https://chrome.google.com/webstore/detail/pkfcbmdddigmhfifefpomilfclfpgmli Planet Commander משחק דפדפן שבו צריך לכבוש כוכבים שונים. אשמח לשמוע את דעתכם. http://www.cnaanaviv.com/stars

לינקים מעניינים, חומרים, מצגות, משחקים והדגמות ל - HTML5 Slides HTML5 Rocks Slides (2010) HTML5 Latest Slides (2011-07-01) Shows Introduction to HTML5 Mobile: HTML5 vs Android Native HTML5 tutorials Demos & Games Chrome Expiriments CE: WebGL: Jelly Fish CE: Game: z-type CE: Video: Video Explosion Video: Stack & Rotate Video: Subtitles Game: Tetris Game: AngryBirds CSS3 Playground Humble Graphs gRaphaël Resources W3C HTML5 spec HTML5 Logo Mozilla tutorial rotating video HTML5 Using Form Validation Patterns Test your browser for HTML5 completness HTML5 Snippets Howto HTML/5 Elements Browser Compare Form Elements Browser Support IE9 vs. FF4 When can i use? HTML5 Browser Support HTML5 Readiness CSS3 Selectors CSS3 Selectors and Competability CSS3 Elements and Support

דינוזאורים עדיין עובדים על XML בכל מיני מקומות לצערי. זה נכון XML נותן הרבה יותר יכולות ש - JSON לא, אבל עדיין, JSON זה פשוט כיף. לעיתים אנחנו נתקלים בצורך להמיר XML ל - JSON מתוך JavaScript, כמו לדוגמא בשימוש בתוך Firefox Extension או קריאות Ajax ו - XSS Cross Sites ּScripting. ישנן הרבה ספריות ברשת להמרת XML ל - JSON רק חלקן ב - JavaScript ורובן לא עובדות. מצאתי אחת שכן עובדת: http://michael.hinnerup.net/blog/wp-content/uploads/2008/01/JsonXml.js http://michael.hinnerup.net/blog/2008/01/26/converting-json-to-xml-and-xml-to-json/ /* The below work is licensed under Creative Commons GNU LGPL License. Original work: License: http://creativecommons.org/licenses/LGPL/2.1/ Author: Stefan Goessner/2006 Web: http://goessner.net/ Modifications made: Version: 0.9-p5 Description: Restructured code, JSLint validated (no strict whitespaces), added handling of empty arrays, empty strings, and int/floats values. Author: Michael Sch...

ספריית JavaScript חמודה שנתקלתי בה הינה ספריית jlinq . jlinq היא ספריית JavaScript לביצוע שאילתות וחיתוכים על אובייקטי JSON מתוך JavaScript. משהו כמו לבצע שאילתות SQL על אובייקטים בזכרון במהלך הריצה של קוד JavaScript. נניח ויש לנו אובייקט כזה: data.users = [{id:1,name:' x ', last:' y ',age:32}, {id:2,name:' john ', last:' do ',age:10}, {id:3,name:' zoe ', last:' brown ',age:45}, {id:4,name:' jz ', last:' kin ',age:56 }]; ננח שנרצה את כל המשתמשים שהשם שלהם מתחיל ב - j: jlinq.from(data.users) .starts(' first ', ' j ').select() ונניח שנרצה את כל אלו שהשם שלהם מתחיל ב - j והם מעל גיל 20 מסודרים לפי גיל: jlinq.from(data.users) .starts(' first ', ' j ').greater(' age ',20).order(' age ').select() הכוח של הספרייה הזו מאוד חזק. ומאפשרת המון שאילתות מאוד מתוחכמות שחוסכות לנו את כל לולאות ה - for שהיינו צריכים לכת...

החזרתי לחיים את משחק הזכרון הממוחשב שכתבתי. המשחק על טהרת ה - JavaScript כמו שאני אוהב :) ניתן לבנות משחק זכרון מתמונות שמחפשים ברשת או להעלות תמונות מהמחשב וליצור משחק מהתמונות שלכם. למשחק הזכרון. משחק זכרון לדוגמא עם תמונות של פיקאסו . משחק זכרון לדוגמא עם תמונות של מדונה . להעלות תמונות שלכם למשחק .

אני יודע שכבר מאות פוסטים נכתבו על הדבר הזה, אבל תמיד נוח שיש משהו מרוכז במקום אחד, ולכן כמה דוגמאות פשוטות ליצירת אובייקטים ב - JavaScript והשימוש בהם. // declartion class a with private function function x() { this.id = 0; function getid() { // undefined - because this meanse the private alert('x' + this.id);function } getid(); } var nx = new x(); // error - undefined cuz it is private function //x.getid(); x(); // declartion class a with public function function a() { this.id = 0; this.getid = function() { alert('a' + this.id); } this.getid(); } // using class a var b = new a(); b.getid(); // object creation on the fly var o = { id: 0, getid: function() { alert('o' + this.id); } } o.getid();