כל הפוסטים של עידן יצחקי
Nested routing in angular standalone component
זוכרים איך באנגולר היינו מושכים מודול שלם, הוא היה מושך את הראוטים הנוספים ועוד הרבה רכיבים, אבל המשיכה הייתה רק
רכיב: שדה בחירה (סלקט) נגיש ב-JS
לבנות סלקט ידנית זה הבסיס לרכיבים כמו בחירה מרובה, השלמה מתוך אופציות ועוד הרבה סוגים של בחירות. לכן, אם נדע
העברה של מידע נסתר בניווט אנגולר
נראה איך להעביר מידע בזמן ניווט בין רכיבים אבל המידע יהיה נסתר ולא ניתן לראות אותו ב-URL או ב-DOM. עם
מדריך angular standalone component חלק 2
אחרי שראינו lazy loading component בעזרת הראוט, ניצור עוד דף ועוד רכיבים, נחבר אותם העזרת שירות ונעבור על עוד מספר
מדריך angular standalone component חלק 1
תשכחו כל מה שידעתם על אנגולר! טוב לא באמת, אבל ברגע שעוברים לעבודה עם פרויקט מבוסס רכיבים אוטונומים בלבד, יש
שדה טקסט עשיר עם תמונות
אתם הולכים להיות מופתעים עד כמה HTML יכול להיות חכם ולבצע משהו כל כך מורכב, שאם אנחנו היינו רוצים ליצור
פקודות גיט (GIT) בסיסיות ואיך להשתמש בהן
נעבור על רשימה בסיסית של פקודות גיט, נראה בקצרה מה כל פקודה עושה ואיך להשתמש בה.
מדריך typescript in nodejs express
בפוסט זה נראה איך להקים nodeTs, במילים אחרות, nodejs מבוסס typescript. נחבר interface, model, controller, router ונראה את השוני מכתיבה
Expressions & operators in javascript
נראה ביטויים, תנאים ומפעילים ב-JS. נראה איך להשתמש בהם, תוצאות שלהם ובמקרים מסויימים מה ההגבלות והחסרונות שלהם.
איך לסנן ערכים כפולים במערך (unique)
נראה איך לסנן מערך בעל ערכים שחוזרים על עצמם וליצור מערך עם ערכים ייחודיים בלבד. בנוסף נראה קצת איך להשתמש
כללים בסיסים לקבלת פרויקט לפיתוח – פרילנסר
בפוסט זה נדון בשאלות שהתשובה עליהם משנה את הערכת הפרויקט, התשלום על העבודה ולנקות חלק מהערפל עבור כל המשתתפים בפרויקט.
Ts loop through object properties
כאשר עושים לולאה על מפתחות של אובייקט ב-typescript ואז מנסים לשלוף ערך מהאוביקט על פי המפתח שלו, מתקבלת שגיאה. נראה
איך לשנות ערכת נושא (Theme) – dark/light mode
נכיר מה זה css variables, נקים שירות באנגולר ו-2 ערכות נושא, אחת בהירה והשניה כהה. בשירות נקים פונקציה שתעבור ל-theme
Angular Microfrontend Module Federation Tutorial – Part 6
מי שהתקין את הגירסה החדשה של module federation , יש מספר הבדלים מהגירסה שהראתי כאן. לא משמעותי, אבל נעבור עליהם
Angular Microfrontend Module Federation Tutorial – Part 5
נראה איך לשלוח מידע בין מיקרו פרונטאנדים שונים ע"י אירוע מיוחד שמסוגל להעביר מידע ע"פ אוביקט שאנחנו ניתן לו. נעביר
Angular Microfrontend Module Federation Tutorial – Part 4
בחלק הזה נראה איך לשפר את הדיירקטיב שלנו, שידע להתמודד עם רכיב ועם מודול שלם, בנוסף, ידע למשוך גם תלויות
Angular Microfrontend Module Federation Tutorial – Part 3
ניצור directive שידע להתמודד עם משיכה של רכיב ממיקרו פרונטאנד אחר, יעבד אותו ויחזיר את הרכיב בתצורה מתאימה לאנגולר ול-html.
Angular Microfrontend Module Federation Tutorial – Part 2
נראה איך ליצור מודול במיקרו אתר ולמשוך אותו מהאתר הראשי על ידי lazy loading modules routing, נעבור בקצרה על נקודות
Angular Microfrontend Module Federation Tutorial – Part 1
נפתח 3 פרויקטים, אחד מעטפת ועוד 2 שימשכו לתוך המעטפת במספר צורות שונות, החלק הזה נראה איך להתקין ומה המשמעות
Chat – angular, nodejs and socket.io
נבנה צ'ט בעזרת socket.io ונראה איך לממש אותו בצד השרת nodejs ובצד הלקוח angular. נעבור על השורות החשובות ונראה את
מה קורה ב- setTimeout(fn, 0)
נבין את ההבדל בין קוד סנכרוני ולא סנכרוני, נראה בקצרה איך המנגנון של -JS עובד ומה השינוי ש-settimeout עושה לקוד.
Angular nested routes
צורת כתיבה של ניתובים בתוך ניתובים, מעבר מהיר על תצורת כתיבה של ניתוב רגיל וניתוב שנמצא בתוך ניתוב אחר ונראות
מדריך nodeJS Express – חלק 5 – server
בחלק הזה נראה איך כל החלקים הקודמים מתקשרים לנקודת ההתחלה, נכיר את הדף הראשי שהוא השרת בעצמו, נעבור ונכיר את
מדריך nodeJS Express – חלק 4 – middleware
בחלק זה נדבר על middleware, פונקציות מבודדות שהתפקיד שלהם לבצע פעולה ספציפית, לתת שירות לקבצים בשרת על ידיד צריכה שלהם
מדריך nodeJS Express – חלק 3 – routes
אחרי שדיברנו על מודל ועל קונטרול, עכשיו נדבר על נתב, על איך לנתב את הבקשות מהמשתמש למקום המתאים. בנוסף, נעבור
מדריך nodeJS Express – חלק 2 – controllers
נראה את הקשר שלהם למודל שבנינו, נעבור בקצרה על הפונקציות הקיימות. נראה מה תפקיד הטוקן ומה תפקיד ה- bcrypt. נראה
מדריך הטמעה של SVG כחלק מקוד פרויקט באנגולר
נראה איך אפשר להטמיע SVG כחלק מהפרויקט, ליצא אותם ולמשוך אותם ברכיבים של אנגולר. בנוסף נראה איך עוברים את המערכת
מדריך nodeJS Express – חלק 1 – models
נראה מבנה בסיסי של nodejs express , נדבר על התפקיד של מודלים, נראה איך לבנות אחד ראשי ואיך לבנות מודלים
CSS מותאם לכיוון הדף
נראה דוגמה לבניה ללא left/right אלא התחלה וסיום של השורה, נראה מה קורה כשצריך להגדיר פינות שדורשות X ו-Y כמו
מה אפשר לעשות עם js console
פירוט על האופציות של console, כמו: log, dir, warn, error, group, table, trace. בנוסף נראה איך לצבוע את המלל ולבסוף
איך למחוק על פי מערך של אובייקטים ב-mongoDb בשימוש nodeJs Express
ניצור פונקציה שמקבלת מערך של אובייקטים ועל פי המערך מוחקת מבסיס הנתונים שלנו את המידע המתאים. לאחר הפעולה נחזיר תשובה
איך לשמור או לעדכן מערך של אובייקטים ב-mongoDb בשימוש nodeJs Express
נראה איך לעדכן מערך של נתונים שהגיע מהמשתמש, כאשר חלק מהנתונים חדשים וחלק קיימים ודורשים עדכון ונראה איך לשלוח חזרה
convert array of objects to formArray in angular reactive form
קרה לכם שרציתם להעביר מערך של מידע שהגיע מהשרת למערך של רכיבים בתוך טופס כדי שהמשתמש יוכל לשנות אותם ולשלוח
כניסה לשוק של תוכניתן מתחיל
הכרות קצרה איתי כמגייס ובוחן למשרות תוכניתן ג'וניור, למה לשים לב כשבוחרים קורס ואיך להגיע לראיון. במה להתמקד בזמן
Map vs. ForEach
נדבר על ההבדל בינהם, נראה דוגמאות להתנהגות של כל אחד ואת התוצאות לאחר הרצה והדפסה של המערכים כאשר הם עברו
רכיבים: בניה של רכיב אקורדיון ברקורסיה נגיש באנגולר
נראה איך רכיב אקורדיון יכול להכיל את עצמו אין סוף פעמים על פי המידע שהוא מקבל, בהתאמה נבנה interface שגם
רכיבים: בניה של רכיב לוח שנה נגיש באנגולר
יצירה של רכיב לוח שנה נגיש באנגולר אשר יכול גם לקבל ארועים על פני מספר ימים בחודש. נעבור על הבניה
רכיבים: בניה של רכיב MULTI-SELECT נגיש באנגולר
נראה איך לבנות רכיב MULTI SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף
רכיבים: בניה של רכיב AUTOCOMPLETE נגיש באנגולר
נראה איך לבנות רכיב AUTOCOMPLETE, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף נראה
רכיבים: בניה של רכיב SELECT נגיש באנגולר
נראה איך לבנות רכיב SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש ומה התפקיד שלהן.
איך למשוך דינמית favicon של אתרים אחרים ב-JS
בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה
אינטרספטור באנגולר (interceptor)
נראה מה תפקידו של אינטרספטור, איך מפעילים אותו וניתן 2 דוגמאות לאינטרספטורים שונים כדי להמחיש את השימוש בהם, אחד עבור
הגדרות אבטחה על ראוטינג של אנגולר (Guards)
בניה פשוט של GUARD על נתיב URL בקובץ - app-routing.module , הפונקציה תבדוק אם המשתמש ביצע לוג-אין, אם לא,
Image file upload with preview in reactive form
נראה איך לעצב כפתור העלאת קובץ , נשייך אותו לטופס של אנגולר, נעשה לו בדיקת אימות של סוג הטופס ונשלח
מדריך אנגולר בסיסי 101 – חלק 4 – מתחילים לבנות
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 3 – תפקיד הספריות החדשות שיצרנו
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 2 – הכרה של הפרויקט
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 1 – התקנה
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך PWA באנגולר
מדריך Progressive Web Apps לאנגולר CLI , מעבר על היתרונות והיכולות שלו. הדרכה על הקבצים שלו והמשמעות של המאפיינים ב-manifast
איך לבנות Directive באנגולר
קוד קצר באנגולר המדריך איך לבנות טולטיפ על ידי שימוש ב-directive. בנוסף ניתן לראות איך לשנות נראות של התגית על
רכיבים חכמים ורכיבים טיפשים באנגולר
מדריך קצר שעושה סקירה על צורת בניה של פרויקט באנגולר ועל שימוש של רכיבים חכמים ורכיבים טיפשים, בדגש על יתרונות
How to trigger event with another event
איך להפעיל ארוע בעזרת ארוע אחר באנגולר, נראה איך לקשור ארוע של פוקוס לארוע של כניסת עכבר ואיך לקשור ארוע
Custom pipe in angular
רשימה קצרה של pipes שמגיעים כברירת מחדל עם אנגולר ולאחר מכן הדרכה של בנית pipe חדש אשר מקבל מספר ומחזיר
איך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר
הפעלה של פונקציה ברכיב על פי ארוע ניווט באנגולר, ניתן להפעיל בתחילת הניווט, סוף ושגיאה בניווט
עוגיות (Cookies) ליצור ולבדוק ב-JS
מדריך ליצירה של עוגיות (cookies) ב-JS. כולל קוד והסבר לפונקציות קריאה ויצירה של העוגיה
הגדרה בסיסית לאנגולר ראוטינג
הגדרות בסיסיות של ראוטינג באנגולר כולל הסבר קצר למשמעות שלהם ואיך להשתמש בהן בפרויקט.
המרה של אקסל למערך וממערך חזרה לאקסל בעזרת JS
הסבר המראה בקצרה איך להמיר מידע שמגיע מאקסל למערך של אוביקטים ולאחר מיכן איך לבצע המרה של מערך נתונים לקובץ
מדריך אנימציות באנגולר – מתקדם
מדריך מתקדם באנמציות של אנגולר המראה הפעלה של אנמציה על פי שינוי ערך של משתנה, מדרגות של שינויים בזמן
מדריך אנימציות באנגולר
מדריך בסיסי על יצירה של אנמציות באנגולר , תחילה ברמת רכיב ולאחר מכן נגיש לכל הפרויקט
מדריך CSS + HTML – הבסיס – חלק 3
מספר דוגמאות לשימוש ב-html ו-css, כמו תפריט, מעברי צבע, טולטיפ עם חץ ופופאפ
מדריך CSS + HTML – הבסיס – חלק 2
בחלק זה נעבור על חלק מהמאפיינים של CSS שרצוי מאוד להכיר בשביל בסיס טוב לבניה של דפים
angular lazy loading modules routing
הסבר לשימוש ב-lazy loading באנגולר , הפקודות, המבנה של הפרויקט ומה אפשר ואי אפשר לעשות עם הרכיבים בפרויקט.
טיפים וטריקים באנגולר (tips & tricks)
אוסף של טיפים וטריקים קצרים לעבודה יותר נכונה עם אנגולר
SEO| שינוי Meta tag בהתאם לדף באנגולר
שינוי meta tags דינמית באנגולר לשיפור SEO והופעה במנועי חיפוש
בניה של טופס דינמי על פי מידע מהשרת באנגולר
איך ליצור טופס שכל השדות שלו נקבעים על פי מידע שנשלח מהשרת
איך לעבור בלולאה על מאפיינים של אובייקט
איך לעשות לולאה על מאפיינים של אובייקט ולקבל את הסוג, הערך והמפתח של כל מאפיין
צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types)
להשמה של רכיב אנגולר ב-HTML יש יותר מדרך אחת, זה מאפשר לסדר את הדף בצורה יותר נקיה ולעשות ארכיטקטורה יותר
SEO| שינוי כותרת של הדף באנגולר
שינוי דינמי של כותרת הדף/עמוד באנגולר בשיטה הקלה והקצרה מול השיטה הנכונה יותר
פונקצית קריאה מ-JS ל-API בסיסית (XMLHttpRequest)
כתיבה בסיסית של פונקצית javascript לקריאה של API בשרת (GET, POST)
מדריך javascript למתחיל 101 (שיטת כתיבה)
שיטה נוחה לפיתוח ב-javascript על פי אובייקט בעל אוביקטים ומאפיינים נוספים שיכולים לאכלס בעצמם אוביקטים ומאפיינים. עבודה בשכבות שמאגדות מספר
מדריך נגישות אתרים 101
מדריך נגישות אתרים מקוצר, הכרה בסיסית של מאפיינים וסיבות לפיתוח אתרים נגישים
רכיבים נגישים: כפתורי רדיו ותיבות סימון מעוצבים
מכירים את זה שהמעצב נותן מראה חדש לחלוטין לכפתור רדיו או תיבת סימון ולא ניתן להגיע למראה הזה בעזרת CSS,
IIS on Windows 10
כל מחשב עם וונדוס הוא גם סוג של שרת ואפשר להשתמש בו כדי לבחון איך אתר שעשינו יתפקד כשהוא לא
אנגולר Rxjs – BehaviorSubject in Service file
בספרית rxjs יש מספר סוגים של subject , כל אחד והיעוד שלו (והיתרון שלו). הפעם אנחנו נראה איך להשתמש ב-behaviorSubject
angular input and output in the same variable
באנגולר אפשר לכתוב [(ngModel)] , זה נותן לנו חיבור דו כיווני (קריאה וכתיבה). האם ניתן לעשות את זה לכל משתנה
משתנים נוספים באנגולר ngfor
כאשר מבצעים ngfor אפשר למשוך את ה-index שלו, i=index . בנוסף אפשר למשוך עוד נתונים מ-ngfor כמו אלמנט ראשון ואחרון או כל הזוגיים והאי זוגיים. להפעיל class על
רכיבים נגישים: בידוד של קבוצות כפתורי רדיו בנגישות
כאשר יש כפתורי רדיו במסך, תוכנת הנגישות מקריאה את מספר הכפתור מיתוך סה"כ הכפתורי רדיו שיש במסך. זאת אומרת, אם
שימוש ב-currentColor CSS
ב-CSS יש משתנה בשם currentColor הוא מקבל ושומר את הצבע האחרון שנקבע לו, זה יכול להיות מאותו רכיב או מרכיב שעוטף אותו
ריבוי מודולים באנגולר
כאשר אנחנו עובדים על אפליקציה גדולה עם ריבוי קומפוננטות וה- app.module.ts הופך לרשימת קניות ארוכה ניתן לפצל את המודול בצורה הבאה: יש
רשימת css selectors
רשימת סלקטורים שטוב לדעת ב-CSS: * בוחר הכל (כל התגיות) – לא להשתמש בו, אלא אם הוא בא עם סלקטור
איך לכתוב string על כמה שורות ב-javascript מותאם ל-IE11
במידה שאתם רוצים לכתוב ב-javascript משתנה מסוג string ושהערך שלו יכתב ב-JS על מספר שורות ולא בשורה אחת ארוכה (ושיתאים ל-IE11 – ES5), יש אופציה