ממשק המשתמש Yahoo! בלוג (YUIBlog)

CSS עצה מהירה: כיצד למנוע "ירידה לצוף" ב IE6

28 אוקטובר 2010 בשעה 01:52 על ידי תיירי Koblentz | ב CSS 101 , פיתוח | 4 תגובות

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

מה הופך את IE 6 להתבלט היא כי דפדפן זה אינו תומך באופן מלא width רכוש (ולא height לצורך העניין). לפיכך, מאפשר מכולות לגדול כדי להכיל את התוכן שלהם. זוהי צמיחה שיוצרת את הירידה, כי התיבה לא יכול להתאים לחלל מעוצב שלה.

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

לדוגמה, כדי להפוך את העמודה הימנית על ירידה YUIBlog ב-IE 6, כל שעלי לעשות הוא סגנון אחד הדימויים הרכבת הנכונה עם רוחב גדול מ 210 פיקסלים. זה כוחות תמונה IE 6 להגדיל את רוחב העמודה הימנית אשר לאחר מכן כבר לא יכול להתאים ליד בעמודה השמאלית.

התיקונים הרגילים:

word-wrap: break-word;

מיתרים לעטוף ידי שבירת בקצה הימני של התיבה.

wbr עם wbr:after {content:"\00200B"} עבור האופרה

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

overflow-x:hidden;

כל תוכן רחב יותר מאשר מיכל היא חתוכים בקצה הימני של התיבה, אמר.

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

כאשר מתקן ידוע להיכשל קצר

כמה שבועות אחורה, התבקשתי לתקן "ירידה לצוף" על אחד העמודים Yahoo! Finance. בכל הדפדפנים המודרניים, מחרוזת ארוכה היה מבצבץ מתוך הרכבת הנכונה (צילום מסך), אבל ב-IE 6 כי מחרוזת זהה עשה את הירידה בטור הימני מתחת לקיפול (צילום מסך). למרבה הצער, תוכן שמקורו ספק, כך העריכה סימון לא היה אופציה.

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

ביצוע IE 6 להתנהג כמו הגדולים

הטריק כדי להפוך IE 6 להתנהג כמו כל הדפדפנים המודרניים בחוץ היא בסגנון בתיבת עם מרווח זכות שלילית (בתוספת position:relative ).

הדגמה חיה

מבלי לתקן את

מסך למי שלא רואה את הדף ב-IE 6.

עם לתקן את

.fixMe { margin-right:-100px; position:relative; }
.fixMe { margin-right:-100px; position:relative; } 

המרווח שלילי יכול להיות בעל ערך כל עוד ערך זה הוא יותר מאשר הדלתא בין רוחב שהוקצה ואת רוחב בפועל של תיבת מורחבת. זוהי הצהרה כי המונע לצוף טיפה. מטרת position:relative היא להפוך את IE להציג את התוכן מחוץ לגבולות של מיכל האב.

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

דברים לשקול

גרזן זה שומר את הטור במקום, אבל זה לא מונע כי מיכל מלקבל הרחב. זה אומר שאתה יכול לא בסגנון אלמנט עם רקע או גבול, משום שהם יהיו צבועים מחוץ העטיפה. הנה צילום מסך של מה הרקע נראה כמו הגבול כשהם מיושמים בשילוב עם הטכניקה הזו ב-IE 6:

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

jQuery ו Yui 3: סיפורן של שתי ספריות JavaScript

27 אוקטובר 2010 בשעה 02:08 על ידי מארק Rall | ב פיתוח , יישומים Yui | 5 תגובות

לאחרונה היתה לי הזדמנות לבנות סוף הראשון JavaScript יישום הקדמי. להלן סיפור קצר על גילוי והתפתחות שעולה על כאשר מנסים להשתמש בכלים שאינם מתאימים לתפקיד בהישג יד. זה חשבון של למידה הנרכשת דרך בפיתוח מול אותו בסוף יישום באמצעות שתי ספריות שונות מאוד, jQuery ו Yui 3. פרטים של הלקוח לבין פרויקט הושמטו במכוון.

סקירה

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

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

• קובץ זרע ראשוני (<1KB) אחראי על טעינת דינמית של כל מסגרות (למשל, jQuery או Yui 3) וקובץ היישום הראשוני.
• פיתוח הכללת jQuery plugins לתמוך אלמנט טופס סטיילינג ואימות, ועל visualisations תרשים דינאמי.
• הדור והאוכלוסייה של ממשק המשתמש, בהתבסס על תשומות המשתמש, ברירת המחדל של התצורה והמיקום של היישום בתוך האתר של המפרסם.
• חישוב והצגת מידע המבוסס על הקלט של המשתמש.

האינטרס של גילוי מלא, הניסיון שלי עד לנקודה זו היה לפתח קטן, פתרונות העצמאי, סוג שבו אתה יכול בדרך כלל מתארים plugins. אלה כללו רכיבי ממשק משתמש דינמי כגון קרוסלות תמונות, מפות אינטראקטיביות וטוויטר / Flickr יישומונים. באותה תקופה ראשונה מתעסק עם JavaScript, jQuery היה פופולרי, קל ללמוד מותר לי לאסוף במהירות את היסודות הדרושים הפרויקטים שאני עובד עליו. אולם כל אלה היו יחידות עצמאיות ואין לו צורך לקיים אינטראקציה עם קוד אחר או כחלק מיישום גדול יותר.

ניסיון ראשון

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

מה שרציתי היה מסגרת מלאה, בוגר שבתוכו לפתח את האפליקציה הראשונה שלי OO. משהו היה יעיל להדריך אותי לאורך התהליך. בבדיקת הספריות זמין החלטתי לאמץ Yui 3 מהסיבות הבאות:

• משולב, ירושה מבוססי פיתוח יישומים תמיכה כולל תכונה וניהול הכיתה.
• פתרון לטווח ארוך:
  • תמיכה עבור תקנים ונגישות.
  • הממומן על ידי ארגון גדול Yahoo! ידועה,
  • Associated עם שמות מכובדים כמו דאגלס Crockford , ניקולס Zakas ו Stoyan Stefanov .
• אופטימיזציה של ביצועים:
  • קובץ זרע ראשוניים בלבד 7KB.
  • Lazy טעון מודולים על פי דרישה.
  • משלוח CDN.
• מגוון וכולל תיעוד:
  • Yahoo! Developer Network
  • Yui 3 תיעוד API
  • Yui תיאטרון
  • Yui הספריה
  • Yui בלוג
• האבולוציה בוגרות, עקבי בין שתי הגרסאות.
• כלים משולבים ב Yui קומפרסור , YUIDoc , Yui Builder , ו Console .
• לא רק ב-JavaScript, מסגרת CSS מדי.

קח שני

שילוב Yui 3 הביא יתרונות ישירים ועקיפים מספר הפרויקט:

• ירושה מבוססי ארכיטקטורה וניהול הכיתה באמצעות תכונה ממשק, ואת הבסיס ו יישומון כיתות לייצר קוד performant, לשימוש חוזר ומאורגן.
• ההפרדה של המצגת של מודל נתונים באמצעות יישומון המעמד כדי להבהיר בתצוגות חלופיות (מוטבעות או כיסוי) המבוסס על מיקומו של יישומים בתוך האתר.
• Sandboxing ודינמי מודול הכללת דרך YUI.use ().
• חוצה הדפדפן קונסולת באגים באמצעות Yui Console .
• ביום לחסוך, אופטימיזציה של הביצועים באמצעות Yui קומפרסור ב Eclipse.
• הכללת אינטגרציה קלה של קיימים תוספים jQuery.
• ביום לחסוך, תיעוד קוד אוטומטיות באמצעות YUIDoc .

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

הפקת לקחים

בחר את הכלי המתאים לעבודה

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

עקומת למידה תלולה

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

רק לטעון את תוכן בעת ​​הצורך

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

אינטראקציה עם ה-DOM מעט ככל האפשר

נקודה זו אינה מתייחסת לספרייה ספציפית בשימוש. עד במטמון האלמנטים הנדרשים DOM ושימוש בתבניות ה-HTML יותר, זמן UI טיוח נפלה במידה ניכרת. צמתים יכולים להיות במטמון באמצעות Y.one () בעוד רשימות צומת יכול להיות שנתפסו באמצעות Y.all (). כמו כן Y.Node.create () היה מאוד שימושי ביעילות המרת מחרוזות טקסט רב של HTML כדי אלמנטים DOM לפני הכניסה.

למד על ידי, למשל, להשתמש CDN

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

, פאב תת ההמולה

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

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

שילוב שיטות עבודה מומלצות לתוך העבודה שלך

באמצעות Eclipse הצלחנו לשלב JSLint ו Yui קומפרסור לתהליך לבנות. במילים פשוטות, בכל פעם שאתה מכה Ctrl / Cmd + S קוד JavaScript שלך תוקף אופטימיזציה. זה אומר שאתה בודק נגד הקוד, אופטימיזציה בייצור כיתה מן השורה הראשונה של הקוד. זה גם אומר שאתה לא ישכחו כדי לייעל במירוץ הסופי נואש מועד המסירה.

למידה Yui בעבודה

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

• צפו בפרקים הרלוונטיים Yui תיאטרון כדי לקבל סקירה כללית של הספריה או ללמוד מודול ספציפי. אני מאוד ממליץ להתחיל עם:
  • אריק Miraglia של ברוכים הבאים Yui 3
  • טוד Kloots על סוכר 3 Yui
  • מאט סוויני של Yui 3 ביצועים
  • לוק סמית איתור באגים ב Yui 3
  • יצחק Schlueter על פתרון בעיות עם Yui 3
  • אריק Ferraiuolo על Web App פיתוח עם Yui 3
  • אירועים של לוק סמית התפתח
• קראו את Yui על יאהו! Developer Network . אני מנסה לקרוא קצת בכל שבוע ללמוד יותר בכל פעם מחדש לקרוא את זה.
• קרא את ה-API תיעוד. אם אינך יכול למצוא את זה על Yui תיאטרון או ברשת מפתחים, לחפור לתוך ה-API. זה אפילו משתלם לקרוא את הקוד ישירות.
• קרא לפרסם שאלות בפורום על YUILibrary.com .
• שחק הרבה ותהנה!

מסקנה

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

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

YUIConf 2010 מוכר את: הכרזה על שני אירועים ערב מיוחד

26 אוקטובר 2010 בשעה 03:35 על ידי ג'ני דונלי | ב פיתוח , אירועים Yui | Comments Off

YUIConf 2010 נמכר החוצה! תודה לכל מי רשום - אנו מצפים לראות את כולכם בנובמבר. אנחנו עכשיו בליטוש אחרון על לוח הזמנים שלנו, אבל אתה יכול להציץ מה יש לנו כאן בחנות: http://yuilibrary.com/yuiconf2010/schedule.php .

הבהרה כוללים:

• מסלול Node.js שבו אתה יכול כבש על כל הדברים המרגשים קורה עם ג'אווה סקריפט בצד השרת. יש לנו Node.js היוצר ראיין דאל הצגת ולשבת בפאנל על עתיד הנדסה הממשק, ויש לנו DAV Yui של זכוכית, אחד הראשונים להפגין הצומת מבוססי שיפור פרוגרסיבי באמצעות ה-off-המדף בספריה רכיבים (מ Yui 3), מראה מה העתיד נראה.
• מסלול YQL כדי להביא לך עד מהירות על איך למנף YQL כדי לקבל גישה לנתונים מכל מקום באינטרנט. צוות YQL עצמו יהיה על היד כדי לספר לכם על העבודה האחרונה שלהם.
• מקרה מחקרים החושפים כיצד העולם האמיתי פרויקטים ליישם Yui בדרישה בסביבות הייצור. מהנדסים מ-Flickr ו-Yahoo Mail יהיה על היד, ואריק Ferraiuolo - חתן פרס PayPalX עבור העבודה האחרונה שלו - יהיה כאן כדי לדבר על עצה האינטרנט , האחרון שלו Yui 3 מבוסס הפרויקט.
• תובנה מצגות על איך לספק חוויות נייד / למגע.
• צולל עמוק על מודולים Yui, מתוך השלמה אוטומטית אל רשתות ה-CSS תרומות גלריה.

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

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

2010 YUIConf פאנל: "העתיד של פיתוח אינטרנט" בהנחיית בן גלבריית ודיון Almaer
8 נובמבר 2010, 6:30-08:00

הירשם להשתתף בכל פאנל http://www.meetup.com/BayJax/calendar/15239592/ .

YUIConf הביא יחד זה פאנל מכובד כדי לחקור את העתיד הקרוב של המשמעת בתקופה של שינוי גדול. חברי הפאנל מתוזמנות כוללים איליין Wherry, מייסד האדריכל הממשק ב Meebo: דאגלס Crockford, אדריכל JavaScript ביאהו; Tantek Çelik, טכנולוג המחבר: ריאן דאל, יוצר Node.js: ג'ו יואיט של פייסבוק, היוצר של Firebug ואחד רוב היישומים שהורדו ניידים של כל הזמנים (פייסבוק עבור iOS); תומאס שא, מייסד Yui ביאהו.

YUIConf 2010 Keynote: "עתיד פרויקט" מאת דאגלס Crockford
10 נובמבר 2010, 6:30-20:00

הירשם להשתתף המרכזי בבית http://www.meetup.com/BayJax/calendar/15239717/ .

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

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

CC תמונות:

• דיון Almaer: http://www.flickr.com/photos/seanosh/3306058997/
• Tantek Çelik: http://www.flickr.com/photos/thomashawk/409672754/
• ריאן דאל: http://www.flickr.com/photos/blank22763/4089950858/
• איליין Wherry: http://www.flickr.com/photos/drewm/3016944830/
• בן גלבריית: http://www.flickr.com/photos/seanosh/3306056383/

תמונות בשימוש על ידי רשות סוג:

• דאגלס Crockford: http://www.flickr.com/photos/allenr/4482834276/
• דאגלס Crockford: http://www.flickr.com/photos/allenr/4341338168/

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

הכרזה Yui 2.8.2 - עדכוני אבטחה חשובים עבור כל המשתמשים Yui 2.4.0-2.8.1

25 אוקטובר 2010 בשעה 11:34 על ידי אריק Miraglia | על פיתוח | 6 תגובות

צוות Yui שוחרר Yui היום 2.8.2. גרסה זו מתקנת פגם ביטחוני כי הוצג בשנת תחילת 2 Yui פלאש תשתית רכיב עם שחרורו Yui 2.4.0. פגם זה מאפשר מנצל JavaScript הזרקת להיווצר נגד דומיינים שמארחים מושפע Yui .swf קבצים. בקר עלון אבטחה עבור Yui 2.8.2 עבור פרטים מלאים על כיצד לזהות ולהחליף בקבצים המושפעים .

אם האתר שלך מארח הפצה 2 Yui בין גרסה 2.4.0 ו 2.8.1 הכוללת את הקבצים הללו, הוא מושפע מפגיעות זו.

אם האתר שלך נטען Yui 2 מ CDN יאהו ( yui.yahooapis.com ) או CDN של גוגל ( ajax.googleapis.com ), וכן את הקבצים לא מאוחסנים על תחום משלך, אתה לא מושפעים. Yui 3 אינו מושפע מבעיה זו.

אתה יכול להוריד Yui 2.8.2 (וגרסאות טלאים של Yui 2.4.0-2.8.1) מן הדף YUILibrary.com הורדות .

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

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

בגלריה Yui 3: הרחבות עבור SVG, נוצר עבור SVG וואו!

18 אוקטובר 2010 בשעה 11:18 על ידי וינסנט הרדי | ב פיתוח , Yui 3 גלריה | 2 תגובות

הקדמה

SVG ( Scalable Vector Graphics ) מספק עבור תחביר הצהרתי, גרפיקה אינטראקטיבית 2D אנימציה: צורות, תמונות וטקסט. תמיכה SVG היא חלק HTML 5 מפרט SVG מיושם על ידי כל הדפדפנים העיקריים, כולל את Internet Explorer של מיקרוסופט גרסה 9 .

Svg-wow.org האתר מציג מה ניתן לעשות עם SVG היום. הדגמות באתר זה נוצרו על פתח SVG בכנס, שבו SVG וואו! המפגשים כבר מסורת מספר שנים. וואו SVG! המפגשים היו נכתבו על ידי דיקן ג'קסון, אז בשיתוף פעולה עם עצמי ואז המשיך אריק Dahlstrom . לאריק ואני collorated על הפגישה עבור 2009 ו 2010 המהדורות של הכנס.

במשך השנתיים האחרונות, הדגמות השתמשו יותר ויותר מסגרות AJAX, יישום התכונות שלהם SVG במקום (או בנוסף) HTML. Yui היא המסגרת הנפוצה ביותר באתר האינטרנט, אשר משתמשת גם 2 Yui ו Yui 3 .

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

SVG סקירה

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

התמונה הבאה היא לכידת מסך של דוגמה stylesheet חלופי ב-SVG wow.org ומראה כמה תכונות SVG במשחק: עיבוד עשיר (השפעות צל, gradients, דפוסי) וצורות פשוטות ומורכבות.

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

להלן zoomed-בתצוגה מראה את התמונה SVG זהה שהוצג קודם לכן, אך שניתנו ברזולוציה גבוהה תוך שמירה על איכות גבוהה.

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

יש הרבה למפרט SVG: סגנונות עיבוד מתקדמות (ליטופים, מילוי, תבניות, מילויים), מסנן אפקטים (מטשטשת, צללים, מטריצות צבע), סגנון CSS, תכונות טקסט מתקדמים (כגון טקסט על נתיב) ואנימציה הצהרתי . אתה יכול לבדוק את ההפניות בסוף הודעה זו כדי ללמוד עוד אודות התכונות בפורמט SVG.

SVG ו-HTML

עם HTML5 , SVG ניתן inlined במסמכי HTML בלי עיכובים נוספים. דפדפנים מתחילים תומכות בתכונה הזו (למשל, אתר 4 ). לעת עתה, כל הדפדפנים העיקריים תמיכה ב SVG inlined XHTML, אשר מספקת את אותה פונקציונליות. SVG ב-XHTML רק דורש כי במרחבי מוכרזים כראוי.

 <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
         ....
     </ Head>
     <body>
         <h1> Inline SVG </ h1>

         <SVG xmlns = "http://www.w3.org/2000/svg" גרסה = "1.1"
          xmlns: xlink = "http://www.w3.org/1999/xlink"
          width = "100%" height = "100%" id = "backgroundSVG">
             <-! תוכן SVG כאן ->
         </ Svg>
     </ Body>
 </ Html>
        

כל דוגמאות קוד בדף זה להשתמש בדרך זו של inlining SVG ב-XHTML.

SVG ו Yui

SVG תומך אנימציה הצהרתי. לדוגמה, אתה יכול הנפשת את הרדיוס של <circle> אלמנט כזה:

 <circle cx="50" cy="100" r="40">
     <animate attributeName="r" values="40,60,20,40" dur="1.5s" />
 </ מעגל>
       

<animate> תג הוא לווה מן SMIL מפרט, יחד עם אלמנטים אנימציה אחרות, הוא מספק מנוע אנימציה חזק מאוד SVG.

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

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

הצורך אנימציה פתרון טוב תסריט הוא מה שדחף את השימוש של Yui ב -SVG וואו הדגמות. עם זאת, הדגמות להשתמש גם תכונות אחרות Yui, ב בפרט Loader ואת צומת מודולים.

Animating SVG עם Yui

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

סיבוב טקסט וצורות	morphing צורות
אלסטי פעימות התוף

להלן מדגים כיצד Yui שימושי פשוט הנפש ולטפל גרפיקה SVG.

Animating SVG transform תכונה

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

Svg-wow.org הרחבות Yui עבור SVG לאפשר animating את transform תכונה כמו זה:

 var בבעלי חדש = י הנפשת ({
     צומת: "# circleA",
     מתוך: {
         לשנות: {tx: 0, ty: 0, SX: 2, סאי: 2}
     },
     אל: {
         לשנות: {tx: 20, ty: 20, SX: 1, סאי: 1}
     },
     transformTemplate: "לתרגם (# tx, ty #) (# SX, # סאי) בקנה מידה",
     משך: 1
 });
        

ראו את הנפשות להפוך בדיקות.

תוכל לציין שערכי להפוך מוגדרים במונחים של "רכיבים" (כגון tx או ty ) אשר משתלבים, כדי ליצור ערך באמצעות transformTemplate נמצא על האובייקט תצורה אנימציה.

התבנית היא מנגנון גמיש לבניית לשנות ערכים בזמן מרכיבים שונים להקל לחשב את ערכי אנימציה. זוהי דוגמה שבה מודל אנימציה Yui אפשרה גמישות רבה יותר (כוח אקספרסיבי יותר) מאשר אלמנט של SVG אנימציה SMIL ( animateTransform ). על מנת ליצור את האנימציה שתוארו לעיל, ההכרזה SMIL המקבילה היה:

 <circle ...>
     <AnimateTransform attributeName = "להפוך" type = "לתרגם"
                       מ = "0,0" ל = "20,20" dur = "1s" להתחיל = "scaleAnim.begin" />
     <AnimateTransform id = "scaleAnim" attributeName = "להפוך" type = "סולם"
                       מ = "2,2" ל = "1,1" dur = "1s" להתחיל = "בלתי מוגבלת" />
 </ מעגל>
        

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

הסיומת Yui עבור animating הופך SVG נעשה שימוש נרחב, כגון מצלמה ו אנימציה מילים דוגמאות. הראשון משתמש שלוחה של Yui 3 בזמן האחרון משתמשת שלוחה של Yui 2.

Animating הגיאומטריה

בסיסי גיאומטריה

Animating הגיאומטריה SVG עם Yui היא די פשוטה. הדוגמה הבאה animates <rect> , רוחב גובה לפינה אלמנט של רדיוס:

 var בבעלי חדש = י הנפשת ({
     צומת: "# rectA",
     מתוך: {
         רוחב: 200,
         גובה: 100,
         rx: 5,
         ר"י: 5
     },
     אל: {
         רוחב: 300,
         גובה: 100,
         rx: 10,
         ר"י: 10;
     },
     משך: 2,
     הקלות: Y.Easing.elasticOut
 });
        

ראו את הנפשות צורה בדיקות.

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

<path> של d לייחס

תכונה אחת הגיאומטריה היא קצת מיוחדת: d תכונה על <path> אלמנט. <path> אלמנט משמש גאומטריה מורכבת באופן שרירותי. <path> יכול לתאר בכל צורה. שלה d תכונה מתארת ​​הגיאומטריה שלו במונחים של מגזרים נתיב שבו ניתן קווים, קשתות, ריבועית או מעוקב עקומות בזייה (יש עוד כמה פקודות, אבל כולם המפה עקומות בזייה).

Animating d תכונה נדרשת גם קצת הרחבה מנוע האנימציה של Yui, אבל עם סיומת זו, d תכונה יכול להיות אנימציה כמו כל האחרים, כמוצג להלן.

 var בבעלי חדש = י הנפשת ({
     צומת: "# pathA",
     מתוך: {ד: "ז 0 0 C 50 0 100 50 100 100 C 50 100 0 50 0 0 Z"},
     אל: {ד: "ז 0 0 C 100 0 100 0 100 100 C 0 100 0 100 0 0 Z"},
     משך 1s,
     הקלות: Y.Easing.bounceBack
 });
        

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

ציטוטים גנדי ההדגמה משתמשת בטכניקה זו של animating את d מייחסים צורות morph לתוך הדמות של גנדי.

Animating תכונות אחרות SVG

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

 / / קטע SVG
 <מסנן ..
     <FeGaussianBlur id = "blurFilter" stdDeviation = "10 10" ...  />
 </ מסנן>

 / / JavaScript אנימציה
 var בבעלי חדש = י הנפשת ({
     צומת: "# blurFilter",
     מתוך: {stdDeviation: [0, 20]},
     אל: {stdDeviation: [0, 0]}
 });
        

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

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

Animating מאפייני CSS

כמו HTML, SVG האלמנטים יש תכונות גם מאפייני CSS. SVG יש כמה מאפיינים ספציפיים CSS . מאפיינים אלה יכול להיות אנימציה, לפעמים כדי ליצור אפקטים מפתיעים. לדוגמה, stroke-dashoffset רכוש ניתן להשתמש כדי לדמות ציור צורה.

 / / קטע SVG
 <rect id="rectA" width="100" height="50" stroke-dasharray="300 300" stroke-dashoffset="300" />

 / / JavaScript
 var בבעלי חדש = י הנפשת ({
     צומת: "# rectA",
     אל: {"שבץ dashoffset ': 0},
     משך: 0.25
 });
        

ראו את הנפשות שבץ בדיקות.

Graffitis ההדגמה משתמשת בטכניקה זו (למרות Yui ללא אנימציה) וכך גם המצלמה הדגמה (הפעם עם Yui אנימציה).

Yui ו SVG: מתחת למכסה המנוע

האתר SVG-wow.org אינטרנט שמשתמש הן 2 Yui ו Yui 3 ויש SVG ספציפי סיומות עבור שניהם. החלק הבא של מאמר זה מתמקד 3 הרחבות Yui.

הרחבות היו זקוקים ל:

• להפוך את העבודה עם Yui ספציפיות DOM של SVG
• להסביר את ההבדלים יישום
• להוסיף תמיכה עבור סוגי תכונה חדשה כגון הופך SVG
• להוסיף העיתוי אנימציה נוספות תכונות סנכרון

הטיפול החשבונאי ספציפיות SVG DOM

כפי שתואר קודם לכן, תכונות SVG יכול להיות אנימציה עם אלמנטים הצהרתי כגון <animate> . כדי לתמוך במודל אנימציה של SVG, ערכי תכונות SVG להחזיק בשני אנימציה ערך הבסיס. לדוגמה, r תכונה על <circle> אלמנט SVGAnimatedLength מוגדר כדלקמן:

 ממשק SVGAnimatedLength {
   תכונה לקריאה בלבד SVGLength baseVal;
   תכונה לקריאה בלבד animVal SVGLength;
 };

כתוצאה מכך, גם ביישומים שאינם תומכים אנימציה הצהרתי, אנחנו צריכים להגיע עד baseVal לקרוא את הערך של תכונה:

 מעגל var = document.getElementById ('# myCircle');
 var rValue = circle.getAttribute ('r') baseVal.value.

הרחבות היו נחוצים כדי לאפשר את מנוע אנימציה לתת דין וחשבון על מודל ערך יוצא דופן את התכונות "SVG. Thankfully, YUI 3 has a concept of animation behaviors . Behaviors are essentially attribute-specific hooks, and it was fairly easy to add support to handle SVG attribute values. For example, SVGAnimatedLength attributes are handled like so:

var lengthBehavior = {
    set: function (anim, att, from, to, elapsed, duration, fun) {
        // SVG specific handling
    },

    get: function (anim, attr) {
        // SVG specific handling
     }
 };

// Handle <circle>'sr attribute
Y.Animate.behaviors.r = lengthBehavior;

There are more extensions for other SVG attributes values such as the transform attribute, color attribute values (like fill , stroke or stop-color ) and attributes such as stdDeviation mentioned earlier.

A few similar tweaks were required, for example in the Y.Node.prototype.toString method, again to account for SVG's baseVal (this time on the className node property). Another example is the default node setter in the Node module.

Accounting for browser differences

While the previous extensions are required because of specification differences between HTML and SVG, the following are required because of implementation variations between browsers.

SVG has a special category of attributes called presentation attributes . In implementations also supporting CSS styling (which all browsers support), these presentation attributes are really just another way to specify a CSS property with a low specificity . From the SVG specification:

The presentation attributes thus will participate in the CSS2 cascade as if they were replaced by corresponding CSS style rules placed at the start of the author style sheet with a specificity of zero. In general, this means that the presentation attributes have lower priority than other CSS style rules specified in author style sheets or 'style' attributes.

Unfortunately, some browsers do not implement the specification correctly and window.getComputedStyle does not always account for all possible sources for setting the SVG CSS properties: CSS selectors, style attribute and presentation attributes.

YUI came to the rescue thanks to the Node module which could be extended to hide these browser differences. The Y.DOM.CUSTOM_STYLES and the Y.Node.prototype.getComputedStyle could be extended to offer a uniform way to read SVG style properties.

Extending Y.DOM

YUI wraps all DOM access through the Node interface. As a result, some SVG specific DOM methods, such as getBBox (used to compute the bounds of an SVG element), are not accessible on the wrapped object.

To make things easier to program for SVG, extensions to the default Y.DOM module (which Node uses) were added to either expose SVG DOM features or add convenience methods, commonly needed when manipulating content:

• firstElement/lastElement/prevElement/nextElement/removeAllChildren (not SVG specific)
• getMatrix/setMatrix . Provides an easy way to manipulate transforms on SVG elements, something notoriously difficult with the standard SVG DOM
• getBBox/getViewportBBox provide simple ways to access bounding box in the element's coordinate system or in viewport space.
• loadContent . A utility to insert a DOM fragment described using a JavaScript object literal. לדוגמה:

  myNode.loadContent({
      tag: 'g',
      fill: 'red',
      stroke: 'none',
      children: [{
          tag: "rect",
          x: 10,
          y: 10,
          width: 200,
          height: 300
      }, {
          tag: 'circle',
          r: 10,
          cx: 105,
          cy: 155
      }, {
          tag: 'image',
          'xlink:href': 'images/photo.png',
          width: 200,
          height: '300px'
      }, prevSibling);
          

  is a shorthand for making various DOM calls (such as createElementNS , setAttributeNS and appendChild ) to create a g element and its children and inserting it before prevSibling under myNode . The utility deals with namespaces for attributes and elements.

Additions to the Animation engine for timing and synchronization

Many, if not most effects involving animation require multiple choreographed animation instances. Typically, several animations are required to create a desired effect, and the start or end of animations depend on each other, sometimes with a time offset: animations need to be synchronized.

For example, if you have a set of shapes which need to fade in one after the other, you will need to create a fade animation for each element and then chain their start time with a slight offset.

var chained = Y.all('#chained circle'),
    firstAnim, previousAnim;

chained.each(function (circle) {
    var anim = new Y.Animate({
        node: circle,
        from: {'fill': 'white'},
        to: {'fill': 'gray'},
        duration: 0.25
     });
    if (previousAnim !== undefined) {
        // Synchrnoize the start of anim to be 0.15 seconds after the begining
        // of the previous circle's animation (previousAnim).
        previousAnim.onBegin(anim, 0.15);
     אחר} {
        firstAnim = anim;
     }
    previousAnim = anim;
 });

// Start the first animation 1s after a click on any of the circles.
// Note that this is an extension to the default YUI run method which does not
// take a time offset.
chained.on('click', function () {
    firstAnim.run(1);
 });

See the time offsets tests.

The method onBegin makes it easy to synchronize the start of two animations, with an optional time offset. Actually, onBegin can also invoke a function with a time offset. Likewise, the onEnd extension makes it easy to synchronize with the end of an animation.

By default, YUI animations have events which provide a way to synchronize. The onBegin and onEnd methods express the synchronization more concisely (a similar example of conciseness is shown below).

In addition, it is sometime necessary to synchronize an animation with an event, again with a time offset. The beginOn and endOn extensions allow us to express that. לדוגמה:

anim.beginOn(Y.one('#button'), 'click', 0.5);

will start the animation 0.5s after the element with id 'button' was clicked. This is a short-hand for:

Y.one('#button').on('click', function () {
    setTimeout(500 /* ms */, function () {anim.run();});
 });

A final extension made to the animation class was the ability to make an animation object apply its first frame's state before it was actually started. This is often needed when creating animation effects involving multiple animations which start at different time offsets.

var anim = new Y.Animate({
    node: Y.one('#button'),
    from: {r: 30, 'fill-opacity': 0, color: 'crimson'},
    to: {r: 80, 'fill-opacity': 1, color: 'gold'},
    duration: 0.25
 });

// the following will set the desired state on the target object prior to
// actually starting the animation.
anim.applyStartFrame();
anim.run(2);

The picture shuffle demo uses animation offsets for the effect that spreads the stack of pictures or puts the pictures back in a stack.

מסקנה

Working with SVG and YUI, and in particular YUI 3, has been a very enjoyable experience: a lot of the YUI functionality applies to SVG right out of the box and YUI's extensible architecture made it possible to work around occasional issues and to add desired functionality.

Of course, increased standard support for SVG in YUI would be helpful, in particular making YUI work with stand alone SVG documents and making the Node class wrap SVG elements without workarounds.

There are also a few enhancements that would be helpful. For example, it would help if animations could target multiple elements. Likewise, supporting multiple values (as in the <animate> SVG element for example) would be helpful to create more sophisticated effects.

The demos on svg-wow.org were written for YUI 3.1 and ported to 3.2 for the purpose of this blog. In 3.2, transitions were introduced which make use of native CSS transitions if available in the browser. It might be possible for the YUI animation engine to similarly leverage SMIL animation where available (Opera, Firefox and WebKit at the time of this writing) which should also yield performance improvements.

The SVG extensions on the svg-wow.org web site are available as a YUI 3 Gallery module for those who want to enjoy the fun of working with YUI and SVG.

הפניות

• SVG Wow!
• SVG Specification
• SVG Tutorial
• Adobe's SVG Zone (a little dated, but still has good examples)
• carto.net examples
• KevLinDev

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

In the Wild for October 15, 2010

October 15, 2010 at 10:03 am by Eric Miraglia | In In the Wild | 2 Comments

YUIConf 2010 is right around the corner , and we continue to have our heads down working on that event and the upcoming YUI 3.3.0 release. In the meantime, here's what we've noted in the community in the past few weeks. Let us know @yuilibrary (or in the comments below) what we missed!

• Andrew Wooldridge, “Learning YUI: Pt. 2 – Community, Logging, and the Console” : Andrew Wooldridge (@triptych) is back with part 2 of his new “Learning YUI” blog series. I particularly like (and agree with) his take on the YUI community: “In a word, community is really what makes YUI stand out to me as a javascript library. If you need help working with YUI, there are community forums , an IRC channel , as well as Open Hours that allow you to talk directly with YUI developers. I would recommend that you get connected early on in your learning experience, especially with the IRC channel because you will discover a helpful group of smart folks hang out there and are willing to answer any question, no matter how seemingly mundane. You also should follow yuilibrary on twitter as you will be tapped into the latest YUI news there.” Check out the full blog post for more . I covered part one in a previous “In the Wild” column . #
  
• Andrew Burgess's “Crash Course” on YUI 2 Grids on NetTuts : Andrew Burgess's “Crash Course” on YUI 2 Grids, which we first noted in May last year , has been picked up by NetTuts and is bringing a new wave of attention to what has historically been one of YUI's most popular projects. #
  
• Create a BlogRoll with Google Spreadsheets and YUI3 : Andrew Wooldridge (@triptych) continues his series of YUI 3-focused articles with a new entry that ties together YUI 3 and Google Docs. “I admit it: I was inspired by this article by Codeinfront.com. The idea of creating a snippet of code that anyone can share, update, and learn from is just extremely compelling and gratifying. So, I offer to you something that you may have never thought of. You can use Google Spreadsheets as a JSON data source. YUI3′s JSONP module talks very nicely to this JSON data source and allows you to essentially create sites that can be data driven and yet never require you to have a complicated PHP MyAdmin setup or MYSQL database. You can do it all via client-side technologies and some help from Google Spreadsheets. If you combine this with the Forms ability in G Spreadsheets, you could even create a cool report page based on some survey you create. Let's get down to code.” Get down to code with the full blog post here #
  
• Video Remixing Site Dragontape Using YUI 3 : Video remixing site Dragontape is making extensive use of YUI 3. Here's how the site's authors describe the project: “Dragontape is a webapp that enables you to create mixtapes of your favorite online videos, so you can watch them as a continuous show. The tapes you create are accessed through a single URL, so you can easily share with friends or embed them in a webpage. The source clips remain in their original locations, Dragontape simply remembers where to find them.” #
  
• Erik Eldridge, “Simple YUI 3 Module for Yahoo! Login” : YDN evangelist Erik Eldrige has written up a nice tutorial on his personal blog that shows you how to leverage YUI 3 and Yahoo!'s OpenID system simply and efficiently. Writes Erik: “Looking at the OpenID landing page on the YDN site might give the impression that logging users into a site with a Yahoo! ID is difficult. Given the following conditions, however, adding Yahoo! login to your site can be quite simple:
  1. Because we're only targeting Yahoo! accounts, we can preset the login location to https://open.login.yahooapis.com/openid/op/auth
  2. If we log users in via a popup, but manage everything via JavaScript on the parent page, we can skip validation of the response coming back from Yahoo!”
  You can find the full tutorial here . #
  
• Upstage, a New YUI 3-powered HTML5 Presentation System by Reid Burke : @Reid is just getting this project underway, but there's a lot to like already. Following in the footsteps of a series of standards-based presentation tools that have launched in the last few years, Upstage puts a YUI 3 twist on the genre. Code is on GitHub — download, fork, and have fun. ( Original source. ) #
  
• A Simple Twitter Widget with YUI 3 and YQL (by @codeinfront) : @codeinfront has posted a new tutorial on using YUI 3 and YQL in a Twitter mashup. “While in between projects I've been playing around with JavaScript dates including conversion to relative time. This then lead me to testing the function within a Twitter widget context. I ended up with a Twitter widget using YUI 3 and YQL. The code below explores a couple of interesting concepts…” Check out the blog post for full details . #
  
• “YUI, How Dare You Make Me Rethink…” : Michigan Techie writes that YUI 3 is designed to break bad habits and challenges him to find new, hopefully better coding patterns. “When you use YUI3 you have a YUI().use() and everything gets encapsulated within that bit of code. So if I were to just move the MyApp code into the YUI block I'm no longer able to access it from the page of content I want to run JS on. So this is good, no JS globals, but it's bad…not the way I've been doing things.” You can see MT's full epiphany here . #
  
• Jeez.eu on Building a Custom Search Engine with YUI : Jeez.eu's tutorial on building a custom search engine relies heavily on YUI 2 widgets and utilities. #
  
• Node.js Resource List from @codeinfront Includes Crockford, Dav Glass : Blogger Mark Rall (@codeinfront) has compiled a set of his favorite Node.js-related resources. Key among them are two recent YUI Theater talks from Douglas Crockford and Dav Glass. For his other favorites, head over to his blog . #
• ErisDS Has Updated Her Carousel Custom-navigation Example for 2.8.x : Northampton blogger ErisDS has updated her work on custom navigation for YUI 2 Carousel to support YUI 2.8.x. “Last year I published two parts of a three part tutorial (doh) on the YUI2 Carousel Widget which worked with YUI Carousel 2.7.0. Since that time, a new couple of new versions of the YUI2: Carousel widget have been released (2.8.0 and 2.8.1), and it seems my examples do not work with the updated code. This post covers the issues, the reasons why they occur and how to resolve them.” Check out the full post here . #
  
• Tweet of the Week : From @bartt : “Being able to use #YUI on both client & server is so nice. JavaScript + my favorite library on both sides of the fence == !context switch.” #
  

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!

YUIConf 2010: Early-bird registration ends this week

October 7, 2010 at 9:03 am by Jenny Donnelly | In Development , YUI Events | 2 Comments

An awesome lineup is in place for YUIConf 2010 , which will be held at Yahoo!'s Sunnyvale, CA campus this November 8-10. Douglas Crockford will be back with a new talk entitled “Project Future”, and Dion Almaer and Ben Galbraith will be moderating a panel on the future of the discipline. We have a stellar lineup of speakers, including Christian Heilmann, Dav Glass, and Nicholas Zakas, taking the podium this year on topics spanning YQL, NodeJS, and YUI:

• An Introduction to YQL
• YQL + YUI: Building End-to-End Applications
• Building YQL Open Data Tables with YQL Execute
• Using (Not Abusing) YQL for Caching, Filtering and Collating Data
• NodeJS + YUI 3
• Using NodeJS and YUI 3 for Server or Browser Side View Rendering
• Avoiding Spaghetti Code with Server-Side JavaScript
• Understanding Progressive Enhancement with YUI: Write Less, Achieve More
• Internationalizing Applications Using YUI 3
• Editor: The Next Generation
• AutoComplete: Deep Space Nine
• The Journey from Idea to Functioning Widget in YUI 3
• Finger Tips: Lessons Learned From Building a Touch-Based Experience
• and much, much more!

Be sure to sign up this week to receive the early-bird rate of $35. After October 8, tickets cost $50.

For folks traveling from outside the Bay Area, we have made available Yahoo! rates at a couple nearby hotels. Check out http://yuilibrary.com/yuiconf2010/ for more details.

CC photo of Dion Almaer by seanosh on Flickr.

Update: The early-bird price was incorrect. Tickets cost $35 through October 8.

מצא את שיחות: Bloglines | technorati

שתף להרחיב: הפוך עם del.icio.us | digg זה! | reddit!