TayebDev

מחר ה-6.11 אני מתגייס לשורות צה”ל (אחרי מיונים ארוכים וממושכים). לא יודע איך יהיו היציאות שלי בחודשים הקרובים כי אני עושה טירונות 02 ואחרי זה קורס (שאני לא זוכר כמה זמן הוא, כנראה חודשיים או שלוש). כשאני אסיים את הקורס כנראה יהיה לי יומיות - כך שאני אוכל להמשיך להסתובב באינטרנט/בפורומים/במסנג’ר למי שיצטרך אותי :).

לגבי  הבלוג, איני יודע איך אני אמשיך לעדכן אותו (כי כנראה אני לא אתעסק בתחום בשנים הקרובות, אולי בתור תחביב) וגם בגלל שרצוי שאני אחשוף פחות דברים חדשים שאלמד בצבא.

היה כיף לשתף איתכם את הידע, להגיע ל-peak ממש לפני הגיוס עם פוסט שיתפרסם ב-Ajaxian.

אז שיהיה לי בהצלחה וגיוס קל .

בכדי ליצור אפקט ב-MooTools צריך להבין ראשית כל מה קורה מאחורי הקלעים כאשר מתבצע אפקט.
1.יוצרים מופע של מחלקת האפקט – בעת היצירה נקבע התדירות (duration) של האפקט שקובעת את גודל הצעד וכן את זמן ההתקדמות (fps) . שני הגדלים נקבעים ע”י ערכי ברירת מחדל או ע”י העברתו בתוך האובייקט options בפרמטר היחידי של הבנאי של מחלקת Fx.
2.קוראים למתודה start עם ערכי from ו-to, במידה ו-from לא הוגדר, המערכת ,תקבע בעצמה from או שלא תעשה כלום (כלומר המתודה start לא נדרסה).
3.המתודה  startTimer נקראת ומייצרת interval על המתודה step שעובדת לפי נוסחא המתבססת על ה-fps שנקבע באיתחול המופע (סעיף 1). בנוסף מוגדר זמן התחלה בתוך משתנה this.time שערכו הוא הזמן הנוכחית – התדירות שנקבעה.
4.המתודה step :
1.מחשבת את אורך הצעד (delta) לפי נוסחת transition המוגדרת בברירת מחדל באובייקט options של Fx או לפי נוסחא שהועברה באובייקט options לבנאי (נוסחאות trnsitions מוגדרות מראש ניתן למצוא במחלקה Fx.Transitions).
2.מחשבת באמצעות הפונקציה compute את הערכים שאליהם הפונקציה אמורה להגיע .
3.משימה אותם בעזרת הפונקציה set שמקבלת את הערך הסופי של הצעד.

עכשיו שהידע בידינו על כל התהליך, ניתן ליצור את האפקט בעצמינו (דוגמא על Fx.Matrix המחלקה שכתבתי עליה בפוסט הקודם)

1.ניצור מחלקה היורשת את המחלקה Fx ונקבע שהבנאי יקבל את האלמנט שעליו פועלים ואת אובייקט ה-options.

Fx.Matrix = new Class({
   Extends: Fx,
   initialize: function (element, options) {
      this.parent(options);
      this.element = element;
   },

2.נדרוס את המתודה set כך שתקבל את הערך העכשווי (=המטריצה) בתור פרמטר ותשמור אותו לתוך ה-Element Storage ותקבע אותו לאלמנט לפי הדפדפן.

set: function (matrix) {
   if (Browser.Engine.trident) {
      if(!this.element.filters[”DXImageTransform.Microsoft.Matrix”]) {
         this.element.style.filter = (this.element.style.filter?'’:’ ‘ )
+ “progid:DXImageTransform.Microsoft.Matrix(M11=’1.0′, sizingMethod=’auto expand’)”;
      }
      $extend(this.element.filters[”DXImageTransform.Microsoft.Matrix”], {
         M11: matrix[0][0],
         M12: matrix[0][1],
         M21: matrix[1][0],
         M22: matrix[1][1]
      });
   } else {
      var propName = Browser.Engine.gecko?”-moz-transform”:”webkitTransform”;
      this.element.setStyle(propName, “matrix(”+matrix.flatten().join(”,”)+”,0,0)”);
   }
   this.element.store(’matrix’, matrix);
},

3.נדרוס את המתודה compute, כך שתקבל שתי מטריצות (from ו-to) ואת ה-delta ותחזיר לנו את מטריצת הביניים. MooTools מספקים פונקציית compute סטטית Fx.compute שיודעת להחזיר את ערך הביניים של שני מספרים לפי הדלתא שמועברת להם.

compute: function (from, to, delta) {
   var a = [[],[]];
   for(var i=0;i<2;i++){
      for(var j=0;j<2;j++){
         a[i][j] = Fx.compute(from[i][j], to[i][j], delta);
      }
   }
   return a;
},

4.נדרוס את המתודה start כך שתוכל לקבל ערך אחד של props ותחשב את ערך ה-to לפי הנתונים שבה, ואת ערך ה-from לפי המטריצה הקיימת על האלמנט כבר (לפי ה-Element Storage) ולפי הערכים ב-props. ולבסוף קוראים ל-this.paretn שיתחיל באמת את האפקט לפי התרחיש שהסברתי למעלה.
הערה: אני משתמש במתודה סטטית בשם prepare בשביל שיהיה אפשר להשתמש בה גם כאשר קובעים מטריצה סטטית בעזרת הפונקציה set.

   start: function (props) {
      var from = this.element.retrieve(’matrix’, 0),
      to = 0;
      var prep = Fx.Matrix.prepare(from, to, props);
      return this.parent(prep.from, prep.to);
   }
});

במסגרת העבודה שלי עשיתי מחקר קטן על איך לבצע אפקטים שיגרמו לצאת מהמבנה הריבועי ויאפשרו לשחק עם הצורה של האלמנט עוד קצת. אחרי מס’ חיפושים בגוגל מצאתי שהדפדפן ספארי תומך ב-CSS Transformations ושIE תמך בזה עוד מגרסאות מוקדמות יותר רק בשם אחר: Matrix filter (נתמך החל מ-IE 5.5).

אז גיליתי שתי אפשרויות:

• הדרך של ספארי: להשתמש במאפיין transform אם אחת מהפונקציות הבאות: skew, rotate, translate, scale, perspective ועוד כמה. מוזילה הודיעו שהם גם יתמכו בזה החל מגרסה 3.1 של Firefox.
• הדרך של IE: להשתמש במאפיין filter עם הרכיב: “DXImageTransform.Microsoft.Matrix”, שיכול לקבל מטריצה בגודל 2*2.

בשתי הדרכים ניתן להעביר מטריצה בתור ערך, רק שספארי תומך באפשרות למטריצות גדולות יותר בגדלים של 3*3 ו-4*4 (האחרון ל-3D Projection).

אז גיליתי את הדרך לצאת מהמבנה הריבועי ובקלות, והגיע הזמן לשלב את זה בתוך MooTools, כך שאוכל לעשות אפקטים.
בשלב הראשון ניסיתי, ללא הצלחה, לשלב את זה בתוך Fx.Morph ככה שיהיה אפשר לעשות את האפקט ביחד עם מאפייני CSS נוספים. חסר דוקיומנטציה בחלק הזה. אז החלטתי לעשות את זה בנפרד מ-Fx.Morph ויצרתי מחלקה משלי Fx.Matrix שיורשת מ-FX - גם פה חסר תיעוד, אבל זה כבר קל יותר - ניתחתי את סדר הפונקציות שנקראות והסתכלתי באפקטים שאנשים אחרים יצרו שמצאתי דרך גוגל.

התוצאה היא מחלקת Fx.Matrix שהוספתי אותה לפרוייקט MUI, פרוייקט קוד פתוח שאני עובד עליו קצת פה וקצת שם שמספק רכיבי ממשק משתמש (UI) בעזרת MooTools. המחלקה תומכת בטרנספורמציות הבאות: scale, skewX, skewY, rotate, scaleNonUniform ו-rotateFromVector. אלו הטרנספורמציות היחידות שניתן לעשות גם ב-IE וגם ב-Safari/FF בגלל התמיכה של IE במטריצות רק בגודל 2*2, אז את שאר הפונקציות לא מימשתי - אבל זה נורא פשוט להוסיף אותן.

איך משתמשים במחלקה:

ראשית, יוצרים מופע של המחלקה:

var mfx = new Fx.Matrix(element, options) — all options are the options of Fx class.

עכשיו, ניתן להשתמש במתודה ’set’ שכמו ב-Fx.Morph, גורמת לאלמנט לעשות את הטרנספורמציה המבוקשת בלי אפקט - ישירות. את מטריצת הטרנספורמציה מעבירים למתודה בתור מערך שכולל בתוכו 2 מערכים פנימיים עם שני איברים כל אחד:

mfx.set([[2,0], [0, 2]]);

המטריצה הזאת מייצגת את הפונקציה scale, כלומר, גודל האלמנט יגדל פי 2 לאורך ולרוחב.

דרך יותר מילולית וקריאה לעשות את הקוד היא להשתמש במערך האסוציאטיבי והסטאטי Functions שמכיל בתוכו את כל הפונקציות הנתמכות שתיארתי קודם:

mfx.set( Fx.Matrix.Functions.scale(2) );

בכדי ליצור יותר מטרנספורמציה אחת, ניתן להשתמש במתודה הסטטית prepare של Fx.Matrix שמקבלת את כל הפונקציות שאנחנו רוצים להשתמש בהן בתור אובייקט ליטרלי:

mfx.set( Fx.Matrix.prepare({
scale: [2],
rotate: [30] // 30 degrees
}) );

כל קריאה למתודה ’set’ שומרת את המטריצה שהועברה לתוך ה-Element Storage.

בשביל ליצור אנימצית טרנספורמציה ניתן להשתמש במתודה ’start’ שמקבלת אובייקט ליטרלי כמו המתודה prepare, עם הבדל אחד: ניתן גם להעביר שני ערכים לכל פונקציה: ערך התחלה וערך סיום, וגם רק ערך אחד: ערך הסיום.

mfx.start( {
scale:[1, 2],
skewX: [40],
skewY: [50, 0]
});

המחלקה נבדקה בעזרת ה-demo בIE7/8, פיירפוקס 3.1 בטא 1 על Windows XP SP3 (מכונה וירטואלית) וספארי 3.1.2 על Windows Vista (במחשב בעבודה).

פוסט זה פורסם גם באנגלית בבלוג בבלוגיה של מיקרוסופט בתקווה ש-Ajaxian ימצאו אותו מספיק מעניין ויפרסמו אותו גם. את הפוסט פירסמתי גם ב-digg וב-dzone, אשמח מאוד אם תעזרו לקדם אותו ע”י לחיצה על הקישורים ולהצביע בעד הפוסט
אם אתם מכירים דרכים לבצע אפקטי 3D בעזרת מטריצה של 2*2, אתם מוצאים באג, דרך לייעל וכן, מצליחים לשלב את זה בתוך Fx.Morph, אשמח אם תתרמו את הקוד בחזרה לפרוייקט שלי.

תודה

לאחרונה הגיעה לאוזני הידיעה ש-Virtual Box  תוכנת הוירטואליזציה בקוד פתוח מבית סאן יודעת לקרוא קבצי VHD, פורמט שמתאים ל-Virtual PC של MS. אצתי להתקין את התוכנה ולבדוק את IE8 Beta 2 בעזרת ה-Evaluation Copy ש-MS מספקים. מלבד דרייברים ועברית שהייתי צריך להתקין באופן עצמאי הכל עבד חלק (כשניסיתי בויסטה לא היה צורך גם להתקין דרייבים ועברית, זה שאב את כל המידע ממערכת ה-Host לדעתי).

התחלתי לחקור את IE8, והדבר הראשון שחיפשתי היה את ה-Developer Tools שלו, לראות אם שידרגו. הפכו אותו לכמעט פיירבאג רק בנוסח MS. הכוונה היא לממשק שדיי דומה ל-Visual Studio שלהם, המאפיינים ה-CSSים וה-HTMLים מופיעים בטבלאות בצד ימין ובצד שמאל יש את עץ הDOM.

ב-Developer Tools החדש יש Javascript Console שמאפשר לשלוח הודעות (info, log ושאר החברים) לקונסול לצרכי דיבוג, וכן קולט שגיאות JavaScript ואזהרות, מהשגיאה ניתן להגיע לשורה המקורית בקובץ ולא לעסוק בניחושים כמו שמדבגים ב-IE6/7. כמו כן יש JavaScript Debugger הכולל תמיכה ב-Breakpoints, Watch וכו’. אני לרוב לא משתמש בדיבאגר כשאני עובד עם JS (רק מסתכל באיזה שורה או מסתכל על ה-Stack Trace). כך שאשמח אם מישהו יוכל לדווח עד כמה הדיבאגר טוב.

תכונה שנורא נורא נורא עוזרת זה האפשרות של להחליף את ה”מנוע” שאיתו הדפדפן עובד - אפשר לבחור אם לרוץ בתור IE8 במצב רגיל או לפי הגדרות ה-Compabilty של הדפדפן או לרוץ בתור IE7. יתר על כן אפשר לשנות את אופן הפירוש אם הוא לפי Quirks Mode או לפי Standard Mode. אם למשל נגדיר את מנוע הפירוש ל-IE7 ואת אופן הפירוש ל-Quirks Mode הדף בעצם מרונדר כאילו משתמשים ב-IE6 - אבל יחי ההבדל הקטן (/גדול) עכשיו ניתן לדבג JavaScript בצורה נורמלית ונוחה הרבה יותר.

ה-Developer Toolbar  כולל גם כל מיני כלים שקיימים בהרחבה-Developer Tool bar לפיירפוקס כמו outline, resize window וכו’.

מה שזה לא כולל זה לראות מה הוריד הדפדפן בדומה לטאב NET של Firebug או בדומה ל-Network Performance ב-Google Chrome.
ל-IE8 יש לחצן ליד שורת הכתובת שמאפשר לעבור ל-Compabilty View, משמע, אם האתר נראה שבור בעקבות השדרוג של הדפדפן אז ניתן להגדיר לדפדפן להשתמש ב”מנוע” של IE7 במקום. ההגדרות נשמרות.
MS בהחלט בכיוון הנכון, אבל הם ממשיכים לפגר מאחור.

ולסיכום אין על FireGod (קישור ל-Firebug).

נתקלתי אתמול בבאג עם הפלאגין של פלאש, אני בניתי חלון צף ב-JS+CSS ובתוכו שמתי Flash Player.
כאשר התחלתי לגרור (Drag) את החלון הצף, הפלאש איתחל את עצמו מחדש כל פעם, מה שלא קרה בשום דפדפן אחר שבדקתי: ספארי, IE6, IE7, גוגל כרום (כן, גם שם בדקתי ).

הפתרון לבעיה הוא לגרום להסתרה של הפלאש באחת משתי דרכים:
1. בתחילת הגרירה (onStartDrag event, או במוטולס onBeforeStart) של החלון לתת לקונטיינר של אובייקט הפלאש: visibility עם הערך hidden ובסוף הגרירה (onDragEnd או במוטולס onComplete) לשנות את הערך ל-visible.

2. למקם מעל אובייקט הפלאש שכבה נוספת. הניחוש שלי שפיירפוקס מצייר מחדש את השכבות העליונות בזמן הגרירה ולכן הוא יצייר מחדש את השכבה הזאת ולא את השכבה של הפלאש שנמצאת מתחת. לשכבה הזאת נותנים opacity:0 בתחילת הגרירה, ומוחקים את השכבה בסוף הגרירה.

אין לי מושג  איך מדווחים על באג ב-BugZilla כך שאשמח אם מישהו יכול לבדוק אם פתחו על זה כבר באג, ואם לא אז לפתוח

גוגל פירסמו היום קומיקס (38 עמודים) שמתאר את היכולות של הדפדפן שלהם Google Chrome שנמצא בפיתוח וישוחרר בקוד פתוח.

קראתי את הקומיקס, בערך כחצי שעה (בגלל העומס שהיה על השרת שלהם) וסיכמתי. אז בכללי הם מציגים את הנקודות הבאות בתור הפיצ’רים של הדפדפן.

להמשך קריאה »

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

“jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.”

להמשך קריאה »

IE6, דפדפן בן 7 שנים שחי עד היום אולי סוףסוף מתחיל לגסוס. הוצאת IE7 לא ריסקה אותו לחלוטין ואנחנו בוני האתרים נשארנו מאוכזבים עוד יותר, לא רק שצריך לתמוך ב-IE7 צריך גם לתמוך אחורה ל-IE6 שכן עדיין יש לו כ-30% משתמשים בעוד של-IE7 יש כ-20% משתמשים. (ע“פ w3counter.com).

לאחרונה נשמעות קריאות ומוצהרות הצהרות מאתרים, חברות ומהמשתמשים עצמם!

להמשך קריאה »

מה זה ThickBox?

ThickBox זה חלון פנימי באתר, כמו Modal Dialog אבל פנימי לעמוד ולא לכל הדפדפן (במקרה של דפדפנים עם גלישה מבוססת טאבים). רק בתוך החלון ניתן להפיק אירועים (למשל: לחיצה) ושום אלמנט אחר במסמך לא יכול לקבל פוקוס מלבדו.

לכן בכדי לממש ThickBox צריך שני אובייקטים במסמך:

1. אובייקט מיסוך – אובייקט שיחסום את כל האירועים משאר האלמנטים בעמוד וישמש בתור מסך, בד“כ גם יצבע באפור/שחור עם שקיפות בכדי להעיד על כך שהוא “חוסם” את החלק האחורי.

2. אובייקט חלון – אובייקט שיכיל בתוכו את התוכן של החלון, את מה שאנחנו רוצים להציג, יש שיעשו אותו קבוע, סטטי איפה שהוא נמצא, ויש שיאפשרו את הגרירה שלו על פני המסך.

אינני הולך לבנות כאן את הקוד עצמו, רק מסביר את הרעיון הכללי וקטעי קוד קטנים שיעזרו במימוש, דרוש ידע ב-JavaScript ובעיקר במודל האירועים וה-DOM בכדי לבנות את הקוד בעצמך.

להמשך קריאה »

מה דעתכם על הבלוגיה של מיקרוסופט? אם אתם עכשיו רוצים לפתוח בלוג בנושאי תכנות שלא קשור בטכנולוגיות של MS ובא לכם להשתייך גם לקהילה ולא לחיות בשטח פרטי.

האם הייתם בוחרים בפלטפורמה של MS למרות שהיא לא מתאימה כלכך לקהל היעד שלכם? אמנם מתכנתים אבל בטכנולוגיות שונות.

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

יובל רואה את זה כך:
“אתה לא חייב לעבור למיקרוסופט, אבל זה כן יתרון בזה שאתה כותב סביבה של מפתחים ולא אנשים שחלק קטן מאוד מהם הם מפתחים. יכול להיות שלא כולם יתעניינו בזה, אבל לדעתי הסבירות שיצא מישהו שיתעניין במה שאתה כותב בMS גבוהה יותר מאשר בבלוגלי. בנוסף, זה בלוג לכל דבר ואתה לא חייב ללכת לפי הקהילה שם. חוץ מהמפגשים הקבועים שנחמד להגיע לשם, זה בלוג כמו בבלוגלי..”

אין לי מדד לגבי כמות הקוראים שלי אני יודע רק לפי התגובות של האנשים, ולפי מה שראיתי אנשים מכל האינטרנט הישראלי שאני מסתובב בו הגיעו אליי, אם מלינמגזין (כמו תומר) או מ-underwar.co.il שהייתי קורא שם פעם, מבלוגים של ישראלים שהגבתי אצלם (אוריאל כץ, אריק, אלעד אוסדון) ומהפורומים שאני נמצא בהם ונותן קישור מידי פעם לבלוג שלי.

האם באמת לעבור לבלוגיה של MS יכולה להועיל ברמת החשיפה? (כמובן לא כמו זה שאני אפרסם יותר תוכן)