CSS על מובייל

כנראה ששום דבר לא יהיה פשוט. 

אני צריך לעצב תיבה קופצת MODAL על MOBILE. מאחר ולא קיים דבר שכזה באינטרנט התחלתי לייצר שכזאת אחת. 

נראה שהמצב של מובייל הרבה יותר מבלבל וטריקי מאשר בדפדפנים. ואם בעבר קיטרנו על ריבוי הדפדפנים (3) כיום יש ריבוי מכשירי סמארטפונים שעל גבם יכולים לרוץ דפדפנים שונים. 

לדוגמא : על אנדרואיד יכול לרוץ FIREFOX או אופרה (שזאת אופרה אחרת) 

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

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

http://peter.sh/experiments/vendor-prefixed-css-property-overview/

לא תעשה - או מה אסור לעשות ב javascript

"ואלה הדברים אשר צווה משה את בני ישראל : לא תגנוב ; לא תנאף ; לא תשמש ב eval "

יש מליון כאלה אבל תמיד נעים להזכר - מה אסור לעשות ב JS ומה כדאי.

אחלה לינק לשכאלה

http://www.ifadey.com/2011/05/javascript-mistakes-you-must-avoid/

שלוש נקודות...

"ויאמר הפרודקט מנג'ר, בן אדם, מה אתה רואה? ואומר, סיר נפוח ופניו לצפון, ויאמר אליי, "לא, מאחורי זה!", ואומר, זה טלפון סלולרי עם מסך גדול ובתוכו טקסט. וייפן אליי ויאמר, קח נא את שורת הטקסט אשר אהבת ותחתכה, ותוסף שלוש נקודות לאחריה כאשר יצר המקום מלהכילה. ואומר, מדוע עשית זאת לעבדך אשר אהבת, הבלתי יש קברים מלבד קיוביקי זה."

רש"י:

לאור ריבוי מקרי המובייל, התבקשתי לחתוך את שורת ההמלצות של הWIDGET מה שקורי בלעז truncation. נראה פשוט אבל מנסיוני יש כמה בעיות קליניות. 

האחת: איפה לחתוך את הטקסט

השניה: איפה ואיך להוסיף את ה ellipsis הסיומת (כמו שלוש נקודות...)

אפשר לבצע זאת בכמה דרכים, רובן מורכבות. לכן אביא את הדרך הפשוטה והמהירה.

שיטת ה CSS : השיטה הקלה והבטוחה 

CSS3 מכיל יכולת מופלאה לחתוך את הטקסט לבד בעזרת מילת הקסם text-overflow:ellipsis

p {
      white-space: nowrap;
      width: 100%;                   /* IE6 needs any width */
      overflow: hidden;              /* "overflow" value must be different from "visible" */ 

      -o-text-overflow: ellipsis;    /* Opera 9-10 */
      text-overflow:    ellipsis;    /* IE, WebKit (Safari, Chrome), Opera 11 */
   }

שיטה זאת מבטיחה חיתוך מדוייק ומותאם לרוחב התא בו הטקסט נמצא. אני ממליץ בפה מלא. 

ברם, משום מה Firefox נכון לשניות כתיבת פוסט זה, איננה תומכת בפיטצ'ר נפלא זה - גם בגרסת 4 החדשה. מוזר מאחר ובד"כ היא מקדימה את זמנה. 

קיים פתרון, אך מאחר ואני כותב ווידג'טים הוא איננו רלוונטי לגבי, וזה קריאה לקובץ XML הנקרא XUL שזאת שפה המובנת לפיירפוקס וחברותיה. מאחר ואני 3RD PARTY אינני יכול להשתמש בזה מבחינת הרשאות. אך אם הייתי משתמש אם הייתי כותב אתר, לדוגמא.

לינק המסביר נושא זה טוב ממני

הערת פרמה: אני חייב לזוז אבל מצאתי דרך נהדרת לעשות את זה בקלות.

העתיד נמצא בדפדפן

ובדיוק שחושבים שאין מה לחדש יותר 

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

http://fractal.io/

בלוגר- שינוי מינורי אך מזיק

למי מכם שעובדים עם בלוגר  (או בלוגספוט  - blogspot ) 

ישנו שינוי מינורי שהחבר'ה האלה עשו בAPI ממש לאחרונה, שינוי מסוג זה עם קצת מזל רע, היה תוקע את כל משתמשי חברת OUTBRAIN המחזיקים בבלוג מתחת לבלוגספוט.

השינוי הוא שאם השתמשת בתג סקריפט 

לדוגמא 

<script src='http://Walla.co.il/Walla'></script>

אזי בלוגר היו משנים זאת לLOW CASE 

<script src='http://walla.co.il/walla'></script>

דבר זה הרה גורל לפלאגינים שקוראים לקבצים חיצוניים בעלי UPPERCASE כמו אאוטבריין

הפתרון הוא לשים גרשיים (") במקום גרש (') 

תמוהה מאד ומקומם!

apply and call

ישנם שתי מטודות שמגיעות קומפלט עם כל אובייקט FUNCTION ועוזרות בהעברת נתונים לתוכן.

במאמר הבא יש הסבר פשוט ויפה שמסביר איך להשתמש בכל אחת ואיך לצור DELEGATE (שליח או אובייקט של פונקציה עם הדאטה שלה)

הכותב:
K. Scott Allen

מומלץ

שמירה מטעינה כפולה

להלן קטע קוד שכתוב בשיטת MODULE 

הוא מדגים איך אני יוצר NAMESPACE מחבר אליו CLASS וגם אם הוא נטען פעמיים, התנאי

OBR.ping || function ()

שומר עליו שלא ייצר טעינה נוספת של המודל PING 

OBR = {};
alert(OBR.ping);// undefined
OBR.ping = ( OBR.ping || function () {
  alert("im in!");
  var my = {};
  my.insertPing = function() {
    alert("ping");
  }
  return my;    
}());

OBR.ping = ( OBR.ping || function () {
  alert("im in2 !");
  var my = {};
  my.insertPing = function() {
    alert("ping2");
  }
  return my;    
}());
OBR.ping.insertPing(); /result "im in!" and  "ping"