כל מה שרציתם לדעת על Full Stack
פוסט קליל ומדויק על איך להתמודד נכון עם טעינת תמונות ופונטים ב-Next.js כדי למנוע קפיצות Layout, לשפר את מהירות האתר ולשמור על חווית משתמש איכותית. מבוסס על הדוקומנטציה המעולה של Next.js.
בפוסט הזה, גיא משתף את החוויות שלו משימוש ב-Next.js 15 בשילוב עם Hugging Face API. הוא מדבר על יצירת תמונות בעזרת Form חדש, שיחות עם AI שהפכו למורכבות (וקצת משעשעות), וגם חושף את המאבק הקבוע בבאגים. ומי ידע שאינטגרציה של טכנולוגיות חדשות יכולה להיות כל כך ממכרת?
בפוסט הזה נדבר על יתרונות וחסרונות של שימוש בספריות UI ב-React. האם באמת כדאי לקחת את הדרך הקלה עם ספריות מוכנות או להשקיע בכתיבת כל דבר מאפס? גיא חולק את הדעות שלו על ספריות UI, RTL, והתמודדות עם אתגרים בעיצוב אתרים.
בפוסט הזה נצלול ליצירת אפקט נאון זוהר לטקסט בעזרת CSS בלבד! משחקים עם text-shadow, טיפה opacity, הרבה קסם, וקורטוב של חוסר בגרות.
לפעמים עיצוב נקי זה כל מה שצריך כדי לגרום לאתר להיראות מיליון דולר. הצטרפו אליי להיכרות קצרה עם אפקט הזכוכית — רקע חצי שקוף, טשטוש עדין וקו אלגנטי — וקבלו קוד לדוגמה להתחלה קלה ומהירה.
קומפוננטת Copy ל-Clipboard שמעתיקה ערך ונותנת פידבק חכם עם אייקון משתנה — פשוטה, מהירה ומותאמת לפרונטנדים שרוצים להרים UX טוב בלי כאב ראש.
תופעה מתסכלת: חיבור לשירותי מסדי נתונים בענן נחסם בגלל סינוני אינטרנט מקומיים. גיא משתף מהניסיון שלו איך לזהות את הבעיה ולחסוך שעות של תסכול.
הפוך טקסט רגיל לכתוב בצורה אנכית ב-CSS בעזרת writing-mode: vertical-rl;. טכניקת עיצוב פשוטה ויעילה שיכולה להוסיף סגנון מעניין לדפים שלכם!
Server Actions (או בשמם החדש Server Functions) הם אחד הפיצ'רים הכי מרעננים ב-Next.js 15 ו-React 19. במקום Fetch, Axios, וטפסים בלבד – אפשר לקרוא לפונקציות שרת ישירות מהקליינט! גיא מתלהב, ובצדק.
היתרונות של ShadCN בולטים ביכולת ליצור קומפוננטות מוכנות ומעוצבות בצורה מעולה במהירות. יחד עם זאת, יש גם חסרונות שמגיעים עם תלות ב-Tailwind ו-Radix ועם ההתמודדות עם NEXT 15.
בפוסט הזה נלמד איך בונים אנימציית הקלדה ב-CSS בלבד! שימוש ב-steps() כדי לדמות כתיבה מדויקת, טיפים ליצירת קו מהבהב, וקריצה קטנה לכל מי שחושב ש-anime זה עדיין מגניב.
בפוסט הזה נלמד איך להשתמש ב-has() ב-CSS להחלת dark mode על אתר, בעזרת משתני CSS. גלו איך לבצע את ה-toggle של dark mode בצורה פשוטה ויעילה בעזרת pseudo-class חדש שמהפך את העבודה עם עיצובים דינמיים.
איך זה מרגיש לחזור ל-SQL אחרי MongoDB המפנקת? בפרויקט אישי חדש, גיא מגלה את החספוס (והקסם) שבחיבור Next.js ל-SQL, עם תובנות על ORM, שגיאות מציקות וטיפים למפתחים שמחפשים גישה נכונה.
רוצים הצללה שמכבדת את קווי המתאר של תמונה עם שקיפות? תכירו את drop-shadow. הצלה לחיים (ולעצבים) עם דוגמה ברורה וקוד מוכן.
במדריך זה נגלה איך להפוך אלמנט ב-CSS בעזרת transform: scaleX(-1) ו-scaleY(-1), לקבלת אפקט של תמונת מראה הצידה או למעלה-למטה. נלמד גם כיצד לבחור אלמנטים ביעילות באמצעות nth-child וליצור עיצובים חכמים ודינמיים. פתרון מושלם לכל מי שרוצה לשפר את יכולות העיצוב באתר שלו.
אף אחד לא אוהב קריסות באתר – בטח לא כשהן קורות בקומפוננטות שרת. בפוסט הזה אסביר איך לטפל בשגיאות ב-Next.js בעזרת קובץ error.ts ולהציל גם את חווית המשתמש וגם את מקום העבודה שלכם.
תכינו את משקפי התלת מימד: בפוסט הזה ניצור קובייה שמסתובבת לפי גלילת המשתמש, רק בעזרת CSS בלבד. קסם? כמעט.
בפוסט הזה נלמד איך ליצור הוק פשוט ב-React לשמירת נתונים ב-localStorage. גלו איך להשתמש בהוק לשמירה ושאיבה של נתונים, עם גרסה בסיסית שמכסה את הצרכים הבסיסיים של רוב הפרויקטים.
אם נמאס לכם משרתים מבולגנים ב-Express, כדאי שתכירו את Nest.js – מסגרת עבודה שמביאה סדר, טיפוסיות וחוויית פיתוח עילאית ל-Node.js עם TypeScript. גיא משתף חוויות אמיתיות מהמעבר.
הטקסט ארוך מדי למסך? במקום לשבור את הראש עם JavaScript, גלו את השיטה הפשוטה ב-CSS שמקצרת טקסטים אוטומטית ומוסיפה שלוש נקודות (...) בצורה נקייה ואלגנטית. שלוש שורות ואתם בעניינים.
רוצים ליצור אקורדיון בלי לגעת בקוד JavaScript? השתמשו ב-details ו-summary ב-HTML, פתרון אוטומטי ומגניב שהופך את החיים לקלים. למדו איך להוסיף אותו לעיצוב שלכם עם מינימום עבודה!
איך הופכים אלמנט סטטי למשחק זיכרון מהפנט? בעזרת קצת perspective, טיפת transform-style וקורטוב של backface-visibility. קפצו ל-codepen ותראו בעצמכם כמה קל (וקראנצ'י) זה!
מה קורה כשמעבירים עיצוב מ-Figma לקוד Next.js באמצעות בינה מלאכותית? גיא משתף בחוויית שימוש ראשונית – בין פלאי הטכנולוגיה, כאבי הראש והערמות של דיבים מיותרים.
בפוסט הזה נלמד איך למנוע לחיצה על כפתורים ואלמנטים לחיצים בעזרת CSS, במיוחד בשימושים כמו טפסים חסרים או בזמן ש-Popup פתוח. נסקור את היתרונות והחסרונות של הגישה עם pointer-events: none;.
82 תוצאות
