Jastor is an Objective-C base class that is initialized with a dictionary (probably from your JSON response), and assigns dictionary values to all its (derived class’s) typed @properties.

After complaining to our developers about using the old, <1.8′s => syntax in hashes, I was challenged by my ninja colleague Avi Tzurel to create a script that will convert all the old Ruby hash syntax to the new 1.9, beautiful colon notation. I came up with this: The crazy negative lookbehinds ensures that nothing like will [...]

In Ajax-based sites, there's a constant dilemma: How to get objects rendered in templates? In server side (and output full HTML)? Client side (and mess with JSON objects and HTML strings/DOM generation)? What should be the role division between server and client? Isotope is a template engine that combines server and client side templates into one.

Backups are important. But usually they are made daily or even less often than this. Quick tip I wish I had known a month ago when my MacBook froze and didn’t boot after a fruitful, productive day: backup all the code in realtime, all the time, with Dropbox.

How to create a UI of a tree on the Client Side, using JS & DOM.

I’ve been using Mac OS X for a almost two years. I like it, I really do. But there are a lot of things that drive me crazy. At least in the native/default configuration.

MooTools 1.3 by Ryan Florence – A comprehensive guide Maki – A free web design mock-up tool for pixel perfect layouts CSS Animations – A transition framework that utilizes CSS3 animation abilities ImageOptim – Optimizes images so they take up less disk space and load faster by finding best compression technique CSS: CamelCase Seriously Sucks! – Well [...]

Shoulda.js – A test framework for JS, inspired by Shoulda for Ruby Understanding JavaScript Closures – Great one! Slim templating engine – and I thought Haml was cute…. GitX – Git GUI for Mac OS X easyXDM – Cross domain requests with JavaScript, works on all browsers (but implemented differently for each) Moock – A test-suite [...]

It’s always great to meet new people form the industry, and since I’m at the heart of the Silicon Valley, I’d love to meet or attend meetups. Let me know if you’re around ;)

Wasted a couple of “What the hell is wrong here?” moments about this code: Runtime error: doSomething() is not a function. Obviously, I missed a semicolon after the doSomething() call, but I didn’t imagine this caused the error. JS usually forgives about missing semicolons, if next statement is not in the same line. However, having [...]

לאחר מספר שנים עם הבלוג בעברית, פתחתי בלוג נוסף באנגלית, באותו שם, devign, בכתובת http://devign.me בנוסף לפוסטים שתורגמו מהבלוג הזה, אפרסם שם פוסטים נוספים, חדשים. אשמח לשמוע פידבקים בתגובות. תהנו

באפליקציות ווב ואתרים עשירים, לעיתים קרובות יש צורך בהחלת התנהגות כלשהי על אלמנט. דוגמאות: הפיכת תיבת select לפקד autocomplete השמת אלמנט בתוך מסגרת מורכבת (פינות מעוגלות, שקיפות) החלת אירועי לחיצה על אלמנטים מסוג מסויים השמת תווית צפה מעל פקד טקסט עד ל-focus/שינוי ערכו פיתרון סטנדרטי יהיה להמתין לעליית ה-dom (פונקציה אשר מצוייה בכל ספריית js [...]

לאחר שנים מספר (קצת יותר מ-3 ליתר דיוק) עם אפליקציית הבלוג הדוטנטית הקודמת – החלטתי לעבור לוורדפרס, בשביל נוחות הכתיבה וכמה דברים בסיסיים שהיו חסרים לי. כתובת ה-RSS, הודות ל-FeedBurner, נותרה זהה: http://feeds.feedburner.com/Devign תיתכנה בעיות קלות ב-UI בימים הקרובים. קריאה נעימה

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

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

לדוגמה:

• טעינה בזמן ריצה של קובץ css והשמתו על העמוד לא אומרת שמיידית הוא ישפיע על האלמנטים.
• קבלת html מתוך xmlhttp והשמתו על העמוד לא אומרת שמיידית כולו רונדר וניתן לגשת לרכיבים בו ללא בעיה
• טעינת קובץ javascript לעמוד לא אומרת שכל האובייקטים בו מוכנים לשימוש

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

/// $waitUntil
///		waits until a certain function returns true and then executes a code. checks the function periodically
/// parameters
///		check - a function that should return false or true
///		onComplete - a function to execute when the check function returns true
///		delay - time in milliseconds, specifies the time period between each check. default value is 100
///		timeout - time in milliseconds, specifies how long to wait and check the check function before giving up
function $waitUntil(check,onComplete,delay,timeout) {
	// if the check returns true, execute onComplete immediately
	if (check()) {
		onComplete();
		return;
	}

	if (!delay) delay=100;

	var timeoutPointer;
	var intervalPointer=setInterval(function () {
		if (!check()) return; // if check didn't return true, means we need another check in the next interval

		// if the check returned true, means we're done here. clear the interval and the timeout and execute onComplete
		clearInterval(intervalPointer);
		if (timeoutPointer) clearTimeout(timeoutPointer);
		onComplete();
	},delay);
	// if after timeout milliseconds function doesn't return true, abort
	if (timeout) timeoutPointer=setTimeout(function () {
		clearInterval(intervalPointer);
	},timeout);
}

POC:

var globalVariable=0; 

setTimeout(function () { globalVariable=1; },2000);

$waitUntil(
	function () {
		console.log("checking globalVariable="+globalVariable);
		return globalVariable==1;
	},
	function () {
		alert("done!");
	}
);

בדוגמה אנו יכולים לראות שיש משתנה בשם globalVariableשמאותחל ל-0, ולאחר 2 שניות ערכו הופך ל-1 ידנית. הפונקציה $waitUntil מקבלת שתי פונקציות. האחת תחזיר true/false לפי בדיקה שתבצע, והשניה תבצע קוד שירוץ רק אחרי שהראשונה החזירה true.

* הפונקציה console.log שייכת ל-firebug/webkit/ie8 ולא נתמכת ב-ie6/7.

דוגמאות לשימושים יותר נפוצים:

ajax("url.htm",function (source) {
	element.innerHTML=source;
	$waitUntil(
		function () { return document.getElementById("some-id-in-source")!=null; },
		function () { /* source is rendered and #some-id-in-source is available */ }
	);
});

loadCss("file.css",function () {
	$waitUntil(
		function () { return element.offsetHeight>0; },
		function () { /* css is applied on this element */ }
	);
});

loadJs("file.js",function () {
	$waitUntil(
		function () { return typeof(SomeTypeInFileJs)!="undefined"; },
		function () { /* SomeTypeInFileJs is ready to use */ }
	);
});

הפונקציות loadCss, ajax ו-loadJs טוענות אסינכרונית קבצים ומודיעות כשהם נטענו. ניתן למצוא מימוש שלהן בכל ספריית JavaScript המכבדת את עצמה.

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

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

לדוגמה:

• טעינה בזמן ריצה של קובץ css והשמתו על העמוד לא אומרת שמיידית הוא ישפיע על האלמנטים.
• קבלת html מתוך xmlhttp והשמתו על העמוד לא אומרת שמיידית כולו רונדר וניתן לגשת לרכיבים בו ללא בעיה
• טעינת קובץ javascript לעמוד לא אומרת שכל האובייקטים בו מוכנים לשימוש

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

/// $waitUntil
///		waits until a certain function returns true and then executes a code. checks the function periodically
/// parameters
///		check - a function that should return false or true
///		onComplete - a function to execute when the check function returns true
///		delay - time in milliseconds, specifies the time period between each check. default value is 100
///		timeout - time in milliseconds, specifies how long to wait and check the check function before giving up
function $waitUntil(check,onComplete,delay,timeout) {
	// if the check returns true, execute onComplete immediately
	if (check()) {
		onComplete();
		return;
	}

	if (!delay) delay=100;

	var timeoutPointer;
	var intervalPointer=setInterval(function () {
		if (!check()) return; // if check didn't return true, means we need another check in the next interval

		// if the check returned true, means we're done here. clear the interval and the timeout and execute onComplete
		clearInterval(intervalPointer);
		if (timeoutPointer) clearTimeout(timeoutPointer);
		onComplete();
	},delay);
	// if after timeout milliseconds function doesn't return true, abort
	if (timeout) timeoutPointer=setTimeout(function () {
		clearInterval(intervalPointer);
	},timeout);
}

POC:

var globalVariable=0; 

setTimeout(function () { globalVariable=1; },2000);

$waitUntil(
	function () {
		console.log("checking globalVariable="+globalVariable);
		return globalVariable==1;
	},
	function () {
		alert("done!");
	}
);

בדוגמה אנו יכולים לראות שיש משתנה בשם globalVariableשמאותחל ל-0, ולאחר 2 שניות ערכו הופך ל-1 ידנית. הפונקציה $waitUntil מקבלת שתי פונקציות. האחת תחזיר true/false לפי בדיקה שתבצע, והשניה תבצע קוד שירוץ רק אחרי שהראשונה החזירה true.

* הפונקציה console.log שייכת ל-firebug/webkit/ie8 ולא נתמכת ב-ie6/7.

דוגמאות לשימושים יותר נפוצים:

ajax("url.htm",function (source) {
	element.innerHTML=source;
	$waitUntil(
		function () { return document.getElementById("some-id-in-source")!=null; },
		function () { /* source is rendered and #some-id-in-source is available */ }
	);
});

loadCss("file.css",function () {
	$waitUntil(
		function () { return element.offsetHeight>0; },
		function () { /* css is applied on this element */ }
	);
});

loadJs("file.js",function () {
	$waitUntil(
		function () { return typeof(SomeTypeInFileJs)!="undefined"; },
		function () { /* SomeTypeInFileJs is ready to use */ }
	);
});

הפונקציות loadCss, ajax ו-loadJs טוענות אסינכרונית קבצים ומודיעות כשהם נטענו. ניתן למצוא מימוש שלהן בכל ספריית JavaScript המכבדת את עצמה.

כתבתי קוד לתיקון png על IE, שעובד עם css expression. לא - אין מה לדאוג, לא מדובר ב-css expression שירוץ כל אירוע שקורה בעמוד, אלא רק פעם אחת עבור כל תמונה או אלמנט עם class=png. בנוסף, ישנה תמיכה בשינוי תמונה בצורה דינמית.

img,.png {
	behavior:expression((function () {
		window.__isPng=window.__isPng || function (src) { return src.toLowerCase().indexOf('.png')>-1; };
		window.__fixPng=window.__fixPng || function (el) {
			var pngSource,sizingMethod;
			if (el.nodeName.toLowerCase()=="img" && window.__isPng(el.src)) {
				pngSource=el.src;
				sizingMethod="image";
				el.src="transparent.gif";
			} else if (window.__isPng(el.currentStyle.backgroundImage)) {
				pngSource=el.currentStyle.backgroundImage.replace('url("','').replace('")','');
				sizingMethod=el.currentStyle.backgroundRepeat=="no-repeat" ? "crop" : "scale";
				el.runtimeStyle.backgroundImage="none";
			}
			if (pngSource) el.runtimeStyle.filter="progid:DXImageTransform.Microsoft.AlphaImage"+"Loader(src='"+pngSource+"', sizingMethod='"+sizingMethod+"')";
		};
		this.runtimeStyle.behavior="none";
		var that=this;
		this.attachEvent("onpropertychange",function (e) {
			if (e.propertyName=="src") window.__fixPng(that);
		});
		window.__fixPng(this);
	}).call(this));
}

קצת הסברים:

css expression, יכול להכיל קוד javascript לכל דבר. ההתייחסות ל-this בתוכו, היא התייחסות לאלמנט עצמו. לא מומלץ להשתמש בו מאחר והוא יפעל בכל אירוע בדפדפן. ראו כאן. בהמשך אסביר איך השימוש שלי לגיטימי.

בפונקציה window.__isPng אנחנו נגלה האם path של תמונה מכיל png.
הפונקציה window.__fixPng מקבלת אלמנט, בודקת אם הוא מסוג תמונה או כל אלמנט אחר, בהתאמה בודקת את ה-src או ה-background-image שלו ומחילה עליו filter של AlphaImageLoader. כאשר מדובר בתמונה, נאלץ להשאיר לה src כדי לא להחליף אותה באלמנט אחר. לשם כך נשתמש בתמונה המכילה gif שקוף של פיקסל.

היות הביטוי x=x || function אומר - x שווה ל-x או לפונקציה. ה-או אומר, אם האיבר הראשון הינו שווה ערך ל-false (שזה אומר false, 0, null, undefined או מחרוזת ריקה), תן את האיבר השני, כך הגדרת הפונקציה קורית רק פעם אחת למרות שבפועל כל הקוד שב-expression רץ. אחרי הפעם הראשונה מה שקורה אחרי ה-|| לא מתבצע כי x כבר לא שווה ערך ל-false.

this.runtimeStyle.behavior="none";

קוד זה הוא בעצם ה"תרופה" ל-css expression. הוא יקרה רק פעם אחת לאלמנט ומייד ייעלם.

sizingMethod=el.currentStyle.backgroundRepeat=="no-repeat" ? "crop" : "scale";

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

var that=this;
this.attachEvent("onpropertychange",function (e) {
	if (e.propertyName=="src") window.__fixPng(that);
});

קוד זה בא לענות על צורך של שינוי דינמי של src של תמונה. השימוש ב-onpropertychange נורה כאשר כל מאפיין שונה. בעזרת propertyName נבדוק האם שונה המאפיין src. אירוע זה עובד רק על IE.
מאחר וכל פונקציה מקבלת this משלה, ו-this שבתוך attachEvent הוא אינו האלמנט אלא החלון (למה?!), נאלץ לשמור אותו ברפרנס בשם that.

לבסוף, את הקוד נכליל בעזרת conditional comment ל-IE6 ומטה:

<!--[if lte IE 6]>
<link rel="stylesheet" href="fixpng.css" type="text/css"/>
<![endif]-->

מקווה שתמצאו קוד זה שימושי, אם כי לא לזמן רב מדי. אני מייחל מוות מהיר לשימוש ב-IE6 :)

דוגמה אונליין
הורדת הדוגמה

כידוע, עולם ה-web הוא אסינכרוני. הרבה סוגים של רכיבים מרכיבים מערכת, וכל אחד מהם נטען בנפרד. לכל סוג יש דרך שונה להיטען, ודרך שונה להודיע שהוא נטען. ולפעמים, לא מספיק שהרכיב נטען בשלמותו, שכן הוא צריך להשפיע על רכיבים אחרים בעמוד, ולא תמיד יש לנו הדרך לדעת. סוגי רכיבים נפוצים הם תמונה, קובץ css, קובץ [...]

כתבתי קוד לתיקון png על IE, שעובד עם css expression. לא – אין מה לדאוג, לא מדובר ב-css expression שירוץ כל אירוע שקורה בעמוד, אלא רק פעם אחת עבור כל תמונה או אלמנט עם class=png. בנוסף, ישנה תמיכה בשינוי תמונה בצורה דינמית. img,.png { behavior:expression((function () { window.__isPng=window.__isPng || function (src) { return src.toLowerCase().indexOf('.png')>-1; }; [...]

פרטים אודות האירוע
פרטים אודות הרישום

ASP.NET מרגילה מתכנתים לעבוד בצורה בזבזנית ומחפירה בכל הקשור ל-UI. כאחד שעוסק שנים רבות בפיתוח ל-Web בשלל טכנולוגיות, כל הזמן היה דגש כמה שפחות להטריד את השרת. לא רק ש-ASP.NET WebForms לא עושה את זה, היא אפילו מעודדת להטריד כמה שיותר. וזה פשוט רע.

כמה פעמים ראיתי קוד כמו

void btn_Click(object sender,EventArgs e) {
        Response.Redirect("Page.aspx?Param=Value");
}

יש למישהו מושג איזה תהליך קורה כשלוחצים על הכפתור עד שמגיעים ללינק?

אז תיאור קצרצר:

1. לחיצה על הכפתור מפעילה רוטינות JS לבדוק שהטופס ואלידי בהקשר של אותו Validation Group של הכפתור (אם יש), ובנוסף שמה את הכפתור כ-EventTarget
2. אם הכל כשורה - הטופס נשלח לשרת יחד עם כל ערכי הפקדים הקיימים על העמוד וכמובן ה-ViewState
3. מגיעה בקשת HTTP לשרת, כל הרוטינות הרגילות, הפניות, יצירת HttpContext, הרצת כל ה-HttpModules - טעינת Session, Cache וכו'
4. העמוד המכיל את הכפתור רץ: נוצר מופע מהמחלקה של העמוד
5. כל שרשרת האירועים רצה, אתחול culture, קונטרולים, init, load, render וכמובן שרשרת האירועים של קונטרולים מקוננים בעמוד שלנו
6. אירוע ה-Click ששמנו לכפתור, בין אם ב-aspx בעזרת asp:Button OnClick=btn_Click או בין אם בקוד בעזרת btn.Click+=btn_Click, מחווט ונרשם לכפתור
7. השרת עכשיו בודק מי ה EventTarget שלו ומגלה שזה הכפתור. עכשיו הוא יורה את אירוע ה-Click של הכפתור ומגיע לנחלה - מבצע Response.Redirect.
   

עכשיו שלבים 3-5 רצים שוב עבור העמוד אליו הפנינו.

נשמע הגיוני? לי ממש לא.

<a href="Page.aspx?Param=Value">click</a>
<button onclick="location.href='Page.aspx?Param=Value';">click</button>

זה הרבה יותר טוב.

אז נכון, לא כולם עושים את זה. אבל לשם דוט נט מובילה אנשים שלא מכירים את התחום. ובמלוא מובן המילה - זה רע.

חושבים שזה לא משפיע? המשתמשים/לקוחות שלכם כבר יודעים לזהות אתר עם סיומת aspx כאתר שהולך להיות איטי לגלוש בו. כל האינטראקציה הלוך ושוב בין הקליינט לסרבר כל כך מיותרת ומכבידה על הגלישה עצמה. חוויית משתמש נוראית.
התדמית של ASP.NET כל כך יורדת בגלל היישום התמוה שמיקרוסופט עשו, גם בעיני משתמשים ובטח בעיני מתכנתים אחרים.

תחשבו על הסיטואציה הבאה: אתם מטיילים עם העכבר שלכם על המסך. בכל תזוזה של פיקסל - כל הפיקסלים על המסך מתרנדרים מחדש. הופכים להיות שחורים לעשירית שנייה ומקבלים צבע.
עכשיו תשוו את זה ל-ASP.NET WebForms :)