Product Accessibility Magic

30 בJanuary 2017

I wrote a few lines of code that provide infrastructure writing to prototype of functions of  JavaScript Code Snippet //folowing the magic lines function doProductAccessabilityMagic(prodName, converters) {     iterateOnEachConverters(converters,     function addConvertToPrototype(sourceType, targetType, convertFunction) {         var nameOfConvertFunctionInPrototype = sourceType.name + targetType.name;         sourceType.prototype = convertFunction;     });     iterateOnEachConverters(converters,         function addProductToPrototype(sourceType, targetType, convertFunction) {             sourceType.prototype = function () {                 var name = sourceType.name + targetType.name;                 var invoke = this;                 var convertVal = invoke.apply(this, arguments);                 return convertVal();             }         }); } function iterateOnEachConverters(converters, callback) {     for (prop in converters) {         callback(eval(prop), converters, converters);     } } I wrote a simple product knows how to calculate averages But i  have added...
אין תגובות

קצת רשמים על אנגולר 2.0

12 בOctober 2016

אנגולר 2.0 הוא פתרון  נחמד. אבל יש אבל. כשעברתי את הצעדים של ההתקנות המרובות כדי לראות "שלום עולם" באנגולר ,2 יצא לי רק לתהות מה היה קורה אילו הפתרון הזה היה יוצא מאחד מאתנו ולא מבית היוצר של גוגל. יתכן שהיו מוציאים מישהו להורג... אבל  מסתבר שלגוגל הכול מותר גם להוריד 90 MB ובסביבות 20000 קבצים. בשונה ממה שאני שומע בשוק שאנגולר 2 הוא מהפכה ואנגולר חתכו לחלוטין מאנגולר 1 אז המהפכה היא בעיקר האלמנטים הבאים: התחביר, הדרך של טעינת הקבצים לעמוד,  וכמו כן הלוגיקה הפנימית של בדיקת שינויים. בשאר העניינים השינוי לא כזה עצום, וטביעת האצבע של . אנגולר 1 ניכרת בכול פינה... זו...
תגיות: ,
אין תגובות

תצוגה של רשימת ערי ישראל על האתר שימוש ברכיבי אינטרנט

10 בOctober 2016

המטרה: תצוגה של ערי ישראל ברשימה הדרך: שימוש ב- WebComponent אני מצרף בזאת קובץ פתרון אשמח שתורידו אותו אליכם למחשב IsraelCitiesWebComponent נזדקק לרכיבים הבאים: רכיב היודע לספק את המידע של ערי ישראל רכיב היודע לעבור בלולאה על כול הרשומות רכיב היודע לכתוב פלט ל- Dom נקפוץ למים... להלן הגדרת הרכיב האחראי על קבלת המידע Code Snippet <link rel="import" href="../webComponent/registerElement.html" /> <script src="node_modules/jquery/dist/jquery.js"></script> <script>     (function () {         registerElement("cities-collection")         .logic = function () {             var self = this;             $.get("/site/components/israelCities/israel-cities.json")             .then(function (res) {                 self.api.data.output = res;                 self.api.events.setDone();             });         };     })(); </script>   הרכיב מוריד הגדרות גלובליות שעוזרות לנו לעבוד עם רכיבי אינטרנט פלוס קישור ל jquery רושמים אלמנט חדש...
אין תגובות

תקשורת בין רכיבי תוכנה שונים

ראשית אשמח שתורידו קובץ מצורף המבאר את הדרך ליצור רכיבי אינטרנט מכיוון שפוסט זה לא מציג את כול קבצי המקור: ComponentExample  אחד החלומות היותר ישנים שלי הוא לפתח רכיבי תוכנה שיהיו  מחד גיסא ממודלים ככול האפשר  אך מאידך גיסא שבשעת הצורך ידעו לתקשר אחד עם השני. ספריות רבות עוזרות במשימה זו. זה יכול להיות דיירקטיב של אנגולר 1 או קומפוננט של אנגולר 2 וזה יכול להיות גם קומפוננטה שנכיר לדפדפן בצורה ישירה יותר בלי ספריית עזר ממש כמו Div ו Span. בסופו של דבר כשנמדל רכיב תוכנה לבדו עלינו לשאול את עצמנו את השאלה האם מדובר בכלל ברכיב תוכנה? אין משמעות לעטוף את כול המימוש...
אין תגובות

Data binding in Java script

10 בJune 2016

נתונה הפונקציה הבאה: Code Snippet function createInputForText(val) {     var input = document.createElement("input");     input.type = "text";     input.value = val;     return input; } פונקציית עזר פשוטה היוצרת אלמנט טקסט בוקס המקבל ערך טקסטואלי ומאותחל בערך אותו הפונקציה קיבלה כעת אוסיף קוד המאפשר Data Binding בין תיבת קלט זו לבין מודל כל שהוא והקוד נראה כדלקמן: Code Snippet function stringValue(val) {     var input = createInputForText(val);     var obj = { value: val };     var proxy = new Proxy(obj, {         set: function (obj, prop, value) {             obj = value.toString();             input.value = obj;         }     });     input.addEventListener("input", function () {         proxy.value = this.value;     });     return {         proxy: proxy,         input: input,     }; }    הוגדרה פונקציה המקבלת ערך ויוצרת את שני הצדדים, את הקלט הויזואלי מצד אחד ואת המודל מצד שני ואז דרך אובייקט Proxy אני...
תגיות: ,
אין תגובות

כיצד להשתמש בטכנולוגיות ישנות ועדיין לכתוב טכנולוגיות חדשות?

22 בMarch 2016

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

טעינת פרמטרים לפונקציה מתוך הפונקציה עצמה

17 בMarch 2016

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

יישום הכתוב באנגולר העטוף ברכיב של פולימר

9 בMarch 2016

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

הצגת תאבים של Material Design תוך שימוש בספריית Polymer.

8 בMarch 2016

אם אתם מעוניינים להטמיע תאבים לאתר שלכם, ראשית אני ממליץ על שימוש בתאבים של  Material Design של Google, אם עוד לא התנסיתם  תתחילו מכאן להבין על מה מדובר בכדי לראות את התיעוד אודות tabs לחצו כאן. כרגע גוגל מריצה שני פרוייקטים עיקריים למפתחי אינטרנט,  לראשון קוראים אנגולר ולשני פולימר, שני הפרוייקטים מדהימים מבחינת יעילות קוד, צמצום זמני פיתוח, יצירת קוד אפקטיבי ועוד... אך  בעוד שאנגולר הינו framework שלם המספק טיפול בכמעט כל מה שמפתח אינטרנט צריך, הרי שפולימר הינה ספרייה המתמקדת ביצירת WebComponents כלומר בתהליך של  לקחת מימוש של לוגיקה כל שהיא ולעטוף אותה בתגית HTML כך שניתן יהיה לצרוך את הלוגיקה...
אין תגובות

נתינת אפשרות למשתמש לבטל ניווט או רפרוש עמוד אינטרנט

2 בMarch 2016

 לפני שמבצעים נוויגציה או שמרפרשים עמוד אינטרנט ישנה אפשרות לשאול את המשתמש האם הוא בטוח שהוא רוצה לבצע את הפעולה. שאלה זו מגיעה ממקום של  חשש שנלחץ למשתמש בטעות כפתור הרפרוש/סגירה  וגם מהאפשרות שיתכן והוא לא מודע למשמעות של עזיבת הדף על שינויים שלא נשמרו. :כולנו מכירים את זה מאפליקציה נחמדה שנקראת   פייסבוק שם ההודעה שאנו מקבלים נראית כך: אציג את הדרך לפתרון כעין זה באתר שלי תוך שימוש בטכנולוגיה המדהימה של WebComponent בדוגמה זו אשתמש ב-custom element אבל לא אעשה שימוש ביכולות האחרות של WebComponents כגון template' shadow dom  ו - Html Imports את הדוגמה הבאה אני כותב בכוונה ב- native java script ללא שימוש...
תגיות: ,
אין תגובות