בלוג
תוכן מקצועי ומעשיר בנושאים שיעניינו אותך
15 באוקטובר 2024
Full Stack>>פרונט אנד
איך להפוך אלמנט ב-CSS באמצעות scaleX ו-scaleY – המדריך המלא לשיקוף אלמנטים
במדריך זה נגלה איך להפוך אלמנט ב-CSS בעזרת transform: scaleX(-1) ו-scaleY(-1), לקבלת אפקט של תמונת מראה הצידה או למעלה-למטה. נלמד גם כיצד לבחור אלמנטים ביעילות באמצעות nth-child וליצור עיצובים חכמים ודינמיים. פתרון מושלם לכל מי שרוצה לשפר את יכולות העיצוב באתר שלו.
15 באוקטובר 2024
Full Stack>>NEXTJS
איך מטפלים בשגיאות בקומפוננטות שרת ב-Next.js מבלי לקבל מכתב פיטורים ️
אף אחד לא אוהב קריסות באתר – בטח לא כשהן קורות בקומפוננטות שרת. בפוסט הזה אסביר איך לטפל בשגיאות ב-Next.js בעזרת קובץ error.ts ולהציל גם את חווית המשתמש וגם את מקום העבודה שלכם.
10 באוקטובר 2024
Full Stack>>פרונט אנד
איך ליצור קוביית תלת-מימד שמגיבה לגלילה — בלי שורת JavaScript אחת!
תכינו את משקפי התלת מימד: בפוסט הזה ניצור קובייה שמסתובבת לפי גלילת המשתמש, רק בעזרת CSS בלבד. קסם? כמעט.
9 באוקטובר 2024
Full Stack>>באק אנד
Nest.js – הסדר המופתי ששרתים ב-Node חיכו לו
אם נמאס לכם משרתים מבולגנים ב-Express, כדאי שתכירו את Nest.js – מסגרת עבודה שמביאה סדר, טיפוסיות וחוויית פיתוח עילאית ל-Node.js עם TypeScript. גיא משתף חוויות אמיתיות מהמעבר.
9 באוקטובר 2024
Full Stack>>פרונט אנד
איך לקצר טקסט ארוך בצורה אלגנטית עם CSS בלבד (בלי JavaScript)
הטקסט ארוך מדי למסך? במקום לשבור את הראש עם JavaScript, גלו את השיטה הפשוטה ב-CSS שמקצרת טקסטים אוטומטית ומוסיפה שלוש נקודות (...) בצורה נקייה ואלגנטית. שלוש שורות ואתם בעניינים.
9 באוקטובר 2024
Full Stack>>REACT
הוק פשוט לשמירת נתונים ב-localStorage ב-React
בפוסט הזה נלמד איך ליצור הוק פשוט ב-React לשמירת נתונים ב-localStorage. גלו איך להשתמש בהוק לשמירה ושאיבה של נתונים, עם גרסה בסיסית שמכסה את הצרכים הבסיסיים של רוב הפרויקטים.
19 בספטמבר 2024
Full Stack>>פרונט אנד
הפיצ'ר המגניב של details ו-summary ב-HTML: הפתרון האוטומטי לאקורדיונים
רוצים ליצור אקורדיון בלי לגעת בקוד JavaScript? השתמשו ב-details ו-summary ב-HTML, פתרון אוטומטי ומגניב שהופך את החיים לקלים. למדו איך להוסיף אותו לעיצוב שלכם עם מינימום עבודה!
4 בספטמבר 2024
Full Stack>>פרונט אנד
קסם תלת-מימדי ב-CSS: סיבוב אלמנטים בסטייל של קלף הפתעה!
איך הופכים אלמנט סטטי למשחק זיכרון מהפנט? בעזרת קצת perspective, טיפת transform-style וקורטוב של backface-visibility. קפצו ל-codepen ותראו בעצמכם כמה קל (וקראנצ'י) זה!
3 בספטמבר 2024
Full Stack>>פרונט אנד
מ-Figma ל-Next.js בלחיצת כפתור: ניסוי שטוב, רע ומכוער
מה קורה כשמעבירים עיצוב מ-Figma לקוד Next.js באמצעות בינה מלאכותית? גיא משתף בחוויית שימוש ראשונית – בין פלאי הטכנולוגיה, כאבי הראש והערמות של דיבים מיותרים.
26 באוגוסט 2024
Full Stack>>פרונט אנד
איך למנוע לחיצה על כפתורים ואלמנטים לחיצים ב-CSS
בפוסט הזה נלמד איך למנוע לחיצה על כפתורים ואלמנטים לחיצים בעזרת CSS, במיוחד בשימושים כמו טפסים חסרים או בזמן ש-Popup פתוח. נסקור את היתרונות והחסרונות של הגישה עם pointer-events: none;.
18 באוגוסט 2024
Full Stack>>פרונט אנד
אופציה ל-Dark Mode בקלות: איך להרוס לעצלנים את הדף הבהיר שלהם
קבלו דרך פשוטה ואלגנטית להוסיף Dark Mode לאתר בעזרת CSS Variables בלבד — בלי ספריות חיצוניות ובלי דמעות!
15 באוגוסט 2024
Full Stack>>תכנות Full Stack
להכיר את htmx בחמש דקות: חד-קרן או עז בחניה?
רוצים להכיר את הילד הבעייתי והפופולארי htmx בלי לשרוף את כל האונה הקדמית? בפוסט קליל ומצחיק נלמד מה זה htmx, איך משתמשים בו, ולמי זה מתאים (או ממש לא).
15 באוגוסט 2024
Full Stack>>פרונט אנד
איך יצרתי את אנימציית הסקלטון המושלמת לטעינת עמודים (וסיפור משעשע על הדרך) ⚡
לילות ללא שינה, ריקודים אינדיאניים, והרבה קפה שחור: גיא משתף בסיפור קורע על הדרך (המאוד לא פשוטה) ליצירת אנימציית סקלטון מושלמת לטעינה באתרי ווב.
14 באוגוסט 2024
Full Stack>>פרונט אנד
יצירת מצביע (Cursor) מותאם אישית עם SVG ואנימציה – בצורה חכמה
רוצים לייצר חוויית משתמש ייחודית? גיא משתף איך לבנות מצביע (cursor) מותאם אישית בעזרת SVG פשוט, כולל הוספת אנימציה, והכי חשוב – איך לשמור על UX חכם ולא להפוך את האתר לקרנבל ויזואלי.
12 באוגוסט 2024
Full Stack>>פרונט אנד
איך לאפשר למשתמשים להגדיל אלמנטים ב-CSS עם resize
מי אמר שרק textarea יכולה להשתנות בגודל? גלו איך לגרום לכל אלמנט להיות ניתן להגדלה ע"י המשתמש עם תכונת ה-resize של CSS. פשוט, הזוי, וכיפי – בדיוק כמו שאנחנו אוהבים.
7 באוגוסט 2024
Full Stack>>פרונט אנד
איך ליצור Progress Bar בגלילה ב-CSS בלבד (בלי JS)
למד איך ליצור קו התקדמות שמתקדם בזמן גלילת הדף רק בעזרת CSS, בלי צורך ב-JavaScript. עם פיצ'רים חדשים כמו animation-timeline: scroll(), תוכל להוסיף אפקטים מרשימים בקלות.
7 באוגוסט 2024
Full Stack>>פרונט אנד
איך ליצור טולטיפים ב-CSS – מדריך מלא לשיטות ידניות ואוטומטיות
במדריך הזה נלמד איך לבנות טולטיפ ב-CSS בשיטה ידנית באמצעות מיקום יחסי ואבסולוטי, ואיך להשתמש באטריביוט title ליצירת טולטיפ מיידי ופשוט. נבין גם איך להוסיף אפקטים ואנימציות שיגרמו להסברים להיראות מקצועיים, ברורים ומהנים למשתמשים.
7 באוגוסט 2024
Full Stack>>תכנות Full Stack
בחירת טכנולוגיות לפרויקט קליל: Next.js, Tailwind, Prisma, Three.js ועוד
מחפשים טכנולוגיות לפרויקט קטן וקליל? בפוסט הזה אני משתף את הבחירות שלי לפרויקטון רכבים: Next.js, Tailwind, Prisma, Three.js — עם הסברים למה ואיך, וטיפים קטנים שיעזרו לכם בדרך.
6 באוגוסט 2024
Full Stack>>פרונט אנד
גרדיאנט בגבול עם CSS – איך ליצור גבול צבעוני לכפתור ב-3 דרכים שונות
במדריך זה תגלו כיצד ליצור גבול עם גרדיאנט לכפתור ב-CSS בשלוש דרכים שונות – שימוש ב-pseudo-element, border-image, ורקע עם גבול שקוף. פתרונות מעשיים ויעילים לשדרוג העיצוב שלכם.
11 ביולי 2024
Full Stack>>פרונט אנד
איך להמיר תאריך ללוח שנה עברי עם JavaScript ובלי ספריות!
בפוסט הזה גיא מצא פתרון נהדר להמיר תאריך ללוח שנה עברי בעזרת JavaScript, ללא צורך בספריות נוספות! כל מה שצריך זה להשתמש ב-Intl.DateTimeFormat, וליהנות מתאריך עברי בלחיצת כפתור. פתרון פשוט, מהיר ויעיל.
10 ביולי 2024
Full Stack>>תכנות Full Stack
עלילות גיא ו-SQL: המעבר הכואב (והמציל) ל-Prisma
אחרי רומן קצר ומורכב עם SQL טהור, גיא מגלה שהרומנטיקה של טמפלטים ידניים מתפוגגת מול כאב תחזוקתי אמיתי — ומקבל החלטה לעבור ל-Prisma ORM. סיפור של מעבר חכם מפרגמנטציה לסדר.
10 ביולי 2024
Full Stack>>תכנות Full Stack
הצצה ראשונה ל-htmx: חד-קרן או צלופח?
גיא יוצא לבדוק את htmx — ספריית פרונטאנד חדשה שמבטיחה מהפכה קטנה בדרך שבה אנחנו ניגשים לבניית אפליקציות אינטראקטיביות, בלי לגעת ב-JavaScript. התרשמות ראשונית, יתרונות, ומלא הומור.
10 ביולי 2024
Full Stack>>פרונט אנד
איך ליצור צל איכותי לטקסט בעזרת text-shadow
בפוסט הזה נכיר את הקסם של text-shadow: יצירת צל מדויק ועדין לטקסט — עם הסבר על הפרמטרים, טיפים לשימוש חכם, ואזהרות חמורות נגד עיצוב בסגנון וורד 93.
9 ביולי 2024
Full Stack>>פרונט אנד
️ Loader פעימות לב ב-CSS
בפוסט הזה נראה איך ליצור אנימציה קלילה וחמודה של לב שפועם בעזרת CSS ו-FontAwesome, כדי שהמשתמש לא יישאר תלוי באוויר בזמן טעינה — אלא יתמלא באהבה (או לפחות בסבלנות).
117 תוצאות
כמות בדף