כל הפוסטים בכללי
מה אפשר לעשות עם js console
פירוט על האופציות של console, כמו: log, dir, warn, error, group, table, trace. בנוסף נראה איך לצבוע את המלל ולבסוף
קורס חינם React & GraphQL – שיעור שמיני – noSQL MongoDB
ברוכים השבים לקורס חינם ב React & GraphQL והנה אנחנו לקראת סיום הקורס. למעשה זה השיעור האחרון אם כי יהיה
קורס חינם React & GraphQL – שיעור שביעי – Apollo client
סוף סוף סיימנו עם הצד שרת עד כה, ומי שעוד לא עקב על כל השיעורים האחרונים בקורס חינם זה מוזמן
איך למחוק על פי מערך של אובייקטים ב-mongoDb בשימוש nodeJs Express
ניצור פונקציה שמקבלת מערך של אובייקטים ועל פי המערך מוחקת מבסיס הנתונים שלנו את המידע המתאים. לאחר הפעולה נחזיר תשובה
קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation. המשך.
אז ממשיכים את הפוסט הקודם קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation. ובו
קורס חינם React & GraphQL – שיעור שישי – graphQL על query and mutation.
אוקי אז אולי ההגדרות השימושיות ביותר ב graphQL הם query ו mutation שבאופן כללי אלו שמבצעים את כל העבודה של
איך לשמור או לעדכן מערך של אובייקטים ב-mongoDb בשימוש nodeJs Express
נראה איך לעדכן מערך של נתונים שהגיע מהמשתמש, כאשר חלק מהנתונים חדשים וחלק קיימים ודורשים עדכון ונראה איך לשלוח חזרה
קורס חינם React & GraphQL – שיעור חמישי – graphQL מגדירים schema.
זהו שיעור המשך של השיעור הקודם קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema. כמו כן
קורס חינם React & GraphQL – שיעור רביעי – graphQL מגדירים schema.
סוף סוף מתחילים ללמוד graphQL! עד עכשיו התעסקנו בreact וקצת nodejs ועכשיו הדבר האמיתי. כפי שכבר שציינו graphQL מאפשר לנו
קורס חינם React & GraphQL – שיעור שלישי – צד שרת Nodejs של המשחק איקס עיגול.
שיעורים הקודמים למי שעוד לא עקב נמצאים פה: קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול
convert array of objects to formArray in angular reactive form
קרה לכם שרציתם להעביר מערך של מידע שהגיע מהשרת למערך של רכיבים בתוך טופס כדי שהמשתמש יוכל לשנות אותם ולשלוח
קורס חינם React & GraphQL – שיעור שני – משחק איקס עיגול TIK-TAK-TOE
בהמשך לשיעור הקודם – קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח ממשיכים לבנות את הUI
כניסה לשוק של תוכניתן מתחיל
הכרות קצרה איתי כמגייס ובוחן למשרות תוכניתן ג'וניור, למה לשים לב כשבוחרים קורס ואיך להגיע לראיון. במה להתמקד בזמן
קורס חינם React & GraphQL – שיעור ראשון – אתחול צד לקוח
ברוכים הבאים לקורס חינם בריאקט! זהו מיני קורס חינמי, שבו נלמד שניים מהטכנולוגיות היותר פופולאריות היום בשוק והם: React –
Map vs. ForEach
נדבר על ההבדל בינהם, נראה דוגמאות להתנהגות של כל אחד ואת התוצאות לאחר הרצה והדפסה של המערכים כאשר הם עברו
רכיבים: בניה של רכיב אקורדיון ברקורסיה נגיש באנגולר
נראה איך רכיב אקורדיון יכול להכיל את עצמו אין סוף פעמים על פי המידע שהוא מקבל, בהתאמה נבנה interface שגם
רכיבים: בניה של רכיב לוח שנה נגיש באנגולר
יצירה של רכיב לוח שנה נגיש באנגולר אשר יכול גם לקבל ארועים על פני מספר ימים בחודש. נעבור על הבניה
קורס בניית אתרים בוורדפרס – יצירת סוגי משתמשים
הפרויקט שלנו הולך ומתקדם וכבר יש לנו: סיידר בר קוסטום פוסט טייפ תבנית ייחודית מבנה וורדפרסי נקי עכשיו הגיע הזמן
מדריך ריאקט – react hooks | Custom Hook
ברוכים הבאים לשיעור האחרון במדריך ריאקט – React Hooks . הפעם נעבור על איך לייצר הוק משלכם! מה שנקרא custom
רכיבים: בניה של רכיב MULTI-SELECT נגיש באנגולר
נראה איך לבנות רכיב MULTI SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף
רכיבים: בניה של רכיב AUTOCOMPLETE נגיש באנגולר
נראה איך לבנות רכיב AUTOCOMPLETE, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש . לבסוף נראה
רכיבים: בניה של רכיב SELECT נגיש באנגולר
נראה איך לבנות רכיב SELECT, נבנה אותו נגיש עבור מקלדת וקוראי מסך, נעבור על הפונקציות שחייבים לממש ומה התפקיד שלהן.
אנגולר reactive forms | איך לבדוק שדות עם ולידציה בלחיצה על submit
אז בהמשך למדריך על reactive forms באנגולר . אביא פה עוד תוספת קטנה , שימושית אם לומר את האמת, אבל
מדריך ריאקט – react hooks | useRef
עוד hook מוצלח מבית react הוא useRef. פופולארי מאד והשימוש נפוץ כלכך . אך השימוש בו אינו תמיד נכון, הרבה
איך למשוך דינמית favicon של אתרים אחרים ב-JS
בפוסט זה נראה איך אפשר על פי לינקים בדף למשוך את ה-favicon מהדומיין שלהם באופן דינמי, בדיקה של תקינות התמונה
מדריך ריאקט – react hooks | useMemo & useCallback
הפעם נדבר על שני הוקים, בפוסט אחד, מכוון ששני ההוקים הללו מאד דומים. נתחיל בהסבר קצר, שימוש של useMemo ,
מדריך ריאקט – react hooks | useReducer
useReducer הינו HOOK שמנהל מידע של הקומפוננטה, בדומה לuseState. קודם כל useReducer מגיע מתוך הרעיון של reduce בjavascipt. אז מה
מדריך ריאקט – react hooks | useContext
אחד הדברים השימושיים באפליקציות ריאקט ובכלל, הוא global state management, שהוא למעשה האובייקט הלוקלי של האפליקציה שלכם שמחזיק בתוכו את
מדריך ריאקט – react hooks | useEffect
הוק חשוב מאד במימוש functional components הוא useEffect , מי שמכיר עבודה עם קלאסים בריאקט מכיר את המטודות של לייף
מדריך ריאקט – react hooks | useState
כפי שציינתי הפוסט הקודם: מדריך ריאקט – classes, functional component & hooks העולם של מפתחי ריאקט הולך לכיוון של רכיבים
אינטרספטור באנגולר (interceptor)
נראה מה תפקידו של אינטרספטור, איך מפעילים אותו וניתן 2 דוגמאות לאינטרספטורים שונים כדי להמחיש את השימוש בהם, אחד עבור
הגדרות אבטחה על ראוטינג של אנגולר (Guards)
בניה פשוט של GUARD על נתיב URL בקובץ - app-routing.module , הפונקציה תבדוק אם המשתמש ביצע לוג-אין, אם לא,
Image file upload with preview in reactive form
נראה איך לעצב כפתור העלאת קובץ , נשייך אותו לטופס של אנגולר, נעשה לו בדיקת אימות של סוג הטופס ונשלח
קורס בניית אתרים בוורדפרס – Sidebar
בניית Sidebar הם משהו שפעם היינו משתמשים בו המון בשביל להגדיר כל מני איזורי תוכן מסוגים שונים ופונקציונאליות על מנת
מדריך אנגולר בסיסי 101 – חלק 4 – מתחילים לבנות
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 3 – תפקיד הספריות החדשות שיצרנו
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 2 – הכרה של הפרויקט
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
מדריך אנגולר בסיסי 101 – חלק 1 – התקנה
מדריך בסיסי בו נדבר על התקנה של אנגולר, הכרה בסיסית של הפרויקט והספריות בו ונלמד דברים חשובים שצריך לדעת לפני
graphQl עוקף את REST בסיבוב? מדריך GQL
אם פעם חשבתם ש graphql הוא הפתרון הטוב ביותר לקריאות דטה בייס ככל הנראה צדקדם. יותר ויותר שימושים עם graphql
אנגולר NavigationExtras – skipLocationChange
טיפ קטן, פשוט ושימושי! לא נפוץ במיוחד אבל תתפלאו לגלות כמה זה יכול להקל עליכם אם אתם משתמשים בruoter-outlet פנימי
מדריך PWA באנגולר
מדריך Progressive Web Apps לאנגולר CLI , מעבר על היתרונות והיכולות שלו. הדרכה על הקבצים שלו והמשמעות של המאפיינים ב-manifast
קורס בניית אתרים בוורדפרס – Custom Post types
לפרויקט שלנו אנחנו רוצים לייצר Custom Post type – או בקיצור cpt . אבל לפני שנבנה אחד, בואו נבין מהם
איך לבנות Directive באנגולר
קוד קצר באנגולר המדריך איך לבנות טולטיפ על ידי שימוש ב-directive. בנוסף ניתן לראות איך לשנות נראות של התגית על
קורס בניית אתרים בוורדפרס – קובץ functions
כמתכנתי וורדפרס, קובץ הפונקציות הוא החבר הטוב ביותר שלכם, אתם תשתשו בו המון. למעשה הוא הקובץ שעושה את רוב העבודה
סיפור מחיי העבודה כמתכנת פרונט – עובדה תחת לחץ
פוסט שונה באופיו מהפוסטים האחרים אבל אם לומר את האמת הוא לא פחות חשוב. בפוסט הזה אשתף על תהליך עבודה
וורדפרס ופלאגינים – איך לכתוב לתוך פלאגין polylang
מי שמכיר וורדפרס ויצא לו לעבוד עם ריבוי שפות ועדיין לא הכיר את wpml. אז בוודאי בחר להשתמש בפלאגין polylang.
רכיבים חכמים ורכיבים טיפשים באנגולר
מדריך קצר שעושה סקירה על צורת בניה של פרויקט באנגולר ועל שימוש של רכיבים חכמים ורכיבים טיפשים, בדגש על יתרונות
How to trigger event with another event
איך להפעיל ארוע בעזרת ארוע אחר באנגולר, נראה איך לקשור ארוע של פוקוס לארוע של כניסת עכבר ואיך לקשור ארוע
מדריך ריאקט – classes, functional component & hooks
מי שמכיר ריאקט עוד מראשיתו לא זוכר שהיו בכלל hooks או functional components (כי לא היו). והיום המצב שונה והשימושיות
Custom pipe in angular
רשימה קצרה של pipes שמגיעים כברירת מחדל עם אנגולר ולאחר מכן הדרכה של בנית pipe חדש אשר מקבל מספר ומחזיר
קורס בניית אתרים בוורדפרס – בניית האדר ופוטר בוורדפרס
אז ממשיכים לצעד גורלי במדריך וורדפרס זה ונבנה את המבנה הבסיסי של עמוד אינדקס. לאחר שהקמנו תבנית משלנו , נקבל
מה זה webpack ואיך משתמשים בזה?
לרוב היום, בהרבה מהממשקים שנבנה ,אפשר להבחין באיזה קובץ כזה שנקרא webpack . לא הרבה יודעים מה הוא עושה ואיך
איך להפעיל פונקציה ברכיב כשמתבצע ניווט באנגולר
הפעלה של פונקציה ברכיב על פי ארוע ניווט באנגולר, ניתן להפעיל בתחילת הניווט, סוף ושגיאה בניווט
בעיות נפוצות ב-react | קינפוג עם sass
היום נתקלתי בבעיה חדשה שניסיתי לקנפג לפרויקט חדש ספריית node-sass שמאפשרת לכם ליצור קבצי scss לפרויקט הריאקטי שלכם. להלן השגיאות
עוגיות (Cookies) ליצור ולבדוק ב-JS
מדריך ליצירה של עוגיות (cookies) ב-JS. כולל קוד והסבר לפונקציות קריאה ויצירה של העוגיה
הגדרה בסיסית לאנגולר ראוטינג
הגדרות בסיסיות של ראוטינג באנגולר כולל הסבר קצר למשמעות שלהם ואיך להשתמש בהן בפרויקט.
קורס בניית אתרים בוורדפרס – Custom Theme
סוף סוף מתחילים לשים קוד משלנו על גבי וורדפרס נקי. עכשיו שהרמנו את הסביבה ויש לנו וורדפרס נקי, כל מה
המרה של אקסל למערך וממערך חזרה לאקסל בעזרת JS
הסבר המראה בקצרה איך להמיר מידע שמגיע מאקסל למערך של אוביקטים ולאחר מיכן איך לבצע המרה של מערך נתונים לקובץ
קורס בניית אתרים בוורדפרס – הקמת סביבה לפיתוח בוורדפרס שלב מסד הנתונים
אז ממשיכים עוד קצת בהקמת הסביבה וכל מה שנשאר זה לייצר מסד נתונים בsql שכן קיים על המחשב שלנו בעזרת
קורס בניית אתרים בוורדפרס – הקמת סביבה לפיתוח בוורדפרס
זהו חברים הגענו לחלק האומנותי של הקורס ומעכשיו והעלאה דוחפים ידיים לקוד. אז כיצד מתחילים ? השלב הראשון הוא להוריד
קורס בניית אתרים בוורדפרס – מקורות ללמידת וורדפרס
בגלל שוורדפרס היא הפלטפורמה הפופולארית ביותר בעולם לפיתוח אתרים, קיימים אינסוף אתרים ומקורות מידע שיכולים לסייע לכם. אני ממליץ על
מדריך אנימציות באנגולר – מתקדם
מדריך מתקדם באנמציות של אנגולר המראה הפעלה של אנמציה על פי שינוי ערך של משתנה, מדרגות של שינויים בזמן
מדריך אנימציות באנגולר
מדריך בסיסי על יצירה של אנמציות באנגולר , תחילה ברמת רכיב ולאחר מכן נגיש לכל הפרויקט
מדריך CSS + HTML – הבסיס – חלק 3
מספר דוגמאות לשימוש ב-html ו-css, כמו תפריט, מעברי צבע, טולטיפ עם חץ ופופאפ
קורס בניית אתרים בוורדפרס – סוגי משתמשים והרשאות בוורדפרס
וורדפרס מביא איתו טיפול מלא בכל נושא הרשאות ומשתמשים. עם התקנת הוורדפרס קיימים כ 5 סוגים של משתמשים. למעשה מדובר
קורס בניית אתרים בוורדפרס – ארכיטקטורה והיררכיה
זהו הגעתם לרגע הזה שבו תתחילו "ללכלך את הידיים" ו"להשתפשף על אמת" כמתכנתי וורדפרס אבל שניה לפני שזה קורה עוד
מדריך CSS + HTML – הבסיס – חלק 2
בחלק זה נעבור על חלק מהמאפיינים של CSS שרצוי מאוד להכיר בשביל בסיס טוב לבניה של דפים
קורס בניית אתרים בוורדפרס – הקדמה
ברוכים הבאים לאחד הקורסים היותר מקיפים שיהיו לנו באתר. זה נכון שקודקודייל ברובו נותן טיפים ושטיקים איך להתמודד עם בעיות
angular lazy loading modules routing
הסבר לשימוש ב-lazy loading באנגולר , הפקודות, המבנה של הפרויקט ומה אפשר ואי אפשר לעשות עם הרכיבים בפרויקט.
מדריך אנגולר | סיכום מיני קורס אנגולר reactive forms
הגענו לסיום הקורס באנגולר טפסים מגיבים! למדנו הרבה דברים מעניינים והנה סיכום: מה זה abstract control formControl formGroups, formArray הגדרת
מדריך אנגולר | reactive forms – ולידציות וחיווי בUI
החלק האומנותי הגיע ואנחנו ממש כבר לקראת סיום המיני קורס באנגולר reactive forms. בהחלט מה שחשוב לדעת מלבד לבנות ולידציות
טיפים וטריקים באנגולר (tips & tricks)
אוסף של טיפים וטריקים קצרים לעבודה יותר נכונה עם אנגולר
מדריך אנגולר | reactive forms – ולידציות בהתאמה אישית
אז אחרי שהבנתם מהם ולידציות ואיך נראים ולידציות מובנות. בטח חשבתם לעצמכם, או אפילו כבר נתקלתם בכך שלא קיימת ולידציה
SEO| שינוי Meta tag בהתאם לדף באנגולר
שינוי meta tags דינמית באנגולר לשיפור SEO והופעה במנועי חיפוש
מדריך אנגולר | reactive forms – הוספת ולידציות מובנות
אז אחד החלקים האומנותיים בעבודה עם טפסים הם הולידציות. אנגולר מציע סט שלכם של ולדציות מובנות שכן הם השימושיות לרוב
מדריך אנגולר | reactive forms – חיבור הטופס הריאקטיבי לתצוגת הטופס
אחרי שהיצרנו והרכבנו את האובייקט הריאקטיבי בעזרת formBuilder .עכשיו כל שנותר לנו זה לבנות את הטופס הHTML. ולשייך ולהגדיר, בעזרת
בניה של טופס דינמי על פי מידע מהשרת באנגולר
איך ליצור טופס שכל השדות שלו נקבעים על פי מידע שנשלח מהשרת
איך לעבור בלולאה על מאפיינים של אובייקט
איך לעשות לולאה על מאפיינים של אובייקט ולקבל את הסוג, הערך והמפתח של כל מאפיין
מדריך אנגולר | reactive forms – ארכיטקטורה ובנייה נכונה
השיעור הזה והשיעורים הבאים ככל הנראה יהיו יותר פרקטיים, והגיע הזמן ללכלך את הידיים שלנו ולבנות קצת טפסים!. אז קודם
מדריך אנגולר | reactive forms – בסיס לבניית הטופס המגיב.
אוקיי אז הגענו לשלב שבו מתחילים לרשום קצת טופסים ולמעשה "סיימנו תיאוריה" (לא מדוייק אבל מפה והלאה זה יהיה לרוב
צורות שונות לקריאה של קומפוננטות אנגולר (angular selector types)
להשמה של רכיב אנגולר ב-HTML יש יותר מדרך אחת, זה מאפשר לסדר את הדף בצורה יותר נקיה ולעשות ארכיטקטורה יותר
SEO| שינוי כותרת של הדף באנגולר
שינוי דינמי של כותרת הדף/עמוד באנגולר בשיטה הקלה והקצרה מול השיטה הנכונה יותר
מדריך אנגולר | reactive forms – היכרות בסיסית עם AbstractControl
אפשרויות רבות מתאפשרות בעבודה עם reactive forms , ולמעשה כל האפשרויות הללו מגיעות מהאינסטנס של AbstractControl. שמביא איתו את כל
פונקצית קריאה מ-JS ל-API בסיסית (XMLHttpRequest)
כתיבה בסיסית של פונקצית javascript לקריאה של API בשרת (GET, POST)
מדריך javascript למתחיל 101 (שיטת כתיבה)
שיטה נוחה לפיתוח ב-javascript על פי אובייקט בעל אוביקטים ומאפיינים נוספים שיכולים לאכלס בעצמם אוביקטים ומאפיינים. עבודה בשכבות שמאגדות מספר
scroll to anchor | עם אנגולר. נחמד ושימושי
על מנת לייצר חוויה למשתמש אין צורך לעשות משהו מאוד גרנדיוזי . לרוב, המשתמש שלכם יחווה חוויה דווקא בשימושים קטנים
מדריך נגישות אתרים 101
מדריך נגישות אתרים מקוצר, הכרה בסיסית של מאפיינים וסיבות לפיתוח אתרים נגישים
מדריך אנגולר reactive form – יוצאים לדרך.
אוקי חברים אז בגלל שכל הנושא של טפסים באנגולר הוא לא כזה איזי ובטח לא יכול היות בפוסט אחד. אז
for loop of | איטרציה למערכים ב javascript. עם אינדקס
אין כמו פור לופ קלאסי עם האינדקס המפורסם בשימוש פשוט ליצירת איטרציה למערכים. כולנו מכירים את הדוגמה הבאה: אבל השפות
איך יוצרים טופס פשוט – אנגולר וטפסים מגיבים | Reactive Forms
כל מה שמכיר אנגולר (או שלא מכיר ועכשיו נתקל בפוסט הזה) . ישנם 2 צורות לכתוב טפסים: Reactive Forms Template
רכיבים נגישים: כפתורי רדיו ותיבות סימון מעוצבים
מכירים את זה שהמעצב נותן מראה חדש לחלוטין לכפתור רדיו או תיבת סימון ולא ניתן להגיע למראה הזה בעזרת CSS,
מיצוב תוכן בתגיות HTML , שמעתם על תגית pre?
יש דרכים רבות להתמודד עם תוכן המוזן לתוך תגיות שונות (כגון p , span ועוד..). לדוגמה אם ניכח תגית המוכרת
IIS on Windows 10
כל מחשב עם וונדוס הוא גם סוג של שרת ואפשר להשתמש בו כדי לבחון איך אתר שעשינו יתפקד כשהוא לא
וורדפרס – העדכון נכשל. הודעת שגיאה: התשובה שהתקבלה איננה בפורמט JSON תקין.
אולי נתקלתם בזה: ישנם כמה דברים שכדאי לבדוק בקשר להבעיה מסוג זה: בדקו שאין איזו התנגשות עם כתובת האתר .
SVG Animation – טריק נחמד ויעיל לאנימציה ב-SVG
יש עולם שלם סביב SVG ואנימציות באינטרנט. מי שעוד לא מכיר כלכך וחשב על אנימציות בשילוב באתרים, אז יש כמה
מדריך react | ריאקט | איך מעבירים מידע בין קומפננטות באמצעות props
קוד התנין הבא יהיה בניסוח מעט שונה. כלומר זה לא יהיה איזה מדריך משעמם חלילה. כפי שאתם כבר הבנתם ומי
אנגולר Rxjs – BehaviorSubject in Service file
בספרית rxjs יש מספר סוגים של subject , כל אחד והיעוד שלו (והיתרון שלו). הפעם אנחנו נראה איך להשתמש ב-behaviorSubject