מבחר מאמרים בנושאי צילום, טיולים ופיתוח
תכינו את משקפי התלת מימד: בפוסט הזה ניצור קובייה שמסתובבת לפי גלילת המשתמש, רק בעזרת CSS בלבד. קסם? כמעט.
אם נמאס לכם משרתים מבולגנים ב-Express, כדאי שתכירו את Nest.js – מסגרת עבודה שמביאה סדר, טיפוסיות וחוויית פיתוח עילאית ל-Node.js עם TypeScript. גיא משתף חוויות אמיתיות מהמעבר.
הטקסט ארוך מדי למסך? במקום לשבור את הראש עם JavaScript, גלו את השיטה הפשוטה ב-CSS שמקצרת טקסטים אוטומטית ומוסיפה שלוש נקודות (...) בצורה נקייה ואלגנטית. שלוש שורות ואתם בעניינים.
בפוסט הזה נלמד איך ליצור הוק פשוט ב-React לשמירת נתונים ב-localStorage. גלו איך להשתמש בהוק לשמירה ושאיבה של נתונים, עם גרסה בסיסית שמכסה את הצרכים הבסיסיים של רוב הפרויקטים.
רוצים ליצור אקורדיון בלי לגעת בקוד JavaScript? השתמשו ב-details ו-summary ב-HTML, פתרון אוטומטי ומגניב שהופך את החיים לקלים. למדו איך להוסיף אותו לעיצוב שלכם עם מינימום עבודה!
איך הופכים אלמנט סטטי למשחק זיכרון מהפנט? בעזרת קצת perspective, טיפת transform-style וקורטוב של backface-visibility. קפצו ל-codepen ותראו בעצמכם כמה קל (וקראנצ'י) זה!
מה קורה כשמעבירים עיצוב מ-Figma לקוד Next.js באמצעות בינה מלאכותית? גיא משתף בחוויית שימוש ראשונית – בין פלאי הטכנולוגיה, כאבי הראש והערמות של דיבים מיותרים.
בפוסט הזה נלמד איך למנוע לחיצה על כפתורים ואלמנטים לחיצים בעזרת CSS, במיוחד בשימושים כמו טפסים חסרים או בזמן ש-Popup פתוח. נסקור את היתרונות והחסרונות של הגישה עם pointer-events: none;.
קבלו דרך פשוטה ואלגנטית להוסיף Dark Mode לאתר בעזרת CSS Variables בלבד — בלי ספריות חיצוניות ובלי דמעות!
רוצים להכיר את הילד הבעייתי והפופולארי htmx בלי לשרוף את כל האונה הקדמית? בפוסט קליל ומצחיק נלמד מה זה htmx, איך משתמשים בו, ולמי זה מתאים (או ממש לא).
לילות ללא שינה, ריקודים אינדיאניים, והרבה קפה שחור: גיא משתף בסיפור קורע על הדרך (המאוד לא פשוטה) ליצירת אנימציית סקלטון מושלמת לטעינה באתרי ווב.
רוצים לייצר חוויית משתמש ייחודית? גיא משתף איך לבנות מצביע (cursor) מותאם אישית בעזרת SVG פשוט, כולל הוספת אנימציה, והכי חשוב – איך לשמור על UX חכם ולא להפוך את האתר לקרנבל ויזואלי.
מי אמר שרק textarea יכולה להשתנות בגודל? גלו איך לגרום לכל אלמנט להיות ניתן להגדלה ע"י המשתמש עם תכונת ה-resize של CSS. פשוט, הזוי, וכיפי – בדיוק כמו שאנחנו אוהבים.
למד איך ליצור קו התקדמות שמתקדם בזמן גלילת הדף רק בעזרת CSS, בלי צורך ב-JavaScript. עם פיצ'רים חדשים כמו animation-timeline: scroll(), תוכל להוסיף אפקטים מרשימים בקלות.
במדריך הזה נלמד איך לבנות טולטיפ ב-CSS בשיטה ידנית באמצעות מיקום יחסי ואבסולוטי, ואיך להשתמש באטריביוט title ליצירת טולטיפ מיידי ופשוט. נבין גם איך להוסיף אפקטים ואנימציות שיגרמו להסברים להיראות מקצועיים, ברורים ומהנים למשתמשים.
מחפשים טכנולוגיות לפרויקט קטן וקליל? בפוסט הזה אני משתף את הבחירות שלי לפרויקטון רכבים: Next.js, Tailwind, Prisma, Three.js — עם הסברים למה ואיך, וטיפים קטנים שיעזרו לכם בדרך.
במדריך זה תגלו כיצד ליצור גבול עם גרדיאנט לכפתור ב-CSS בשלוש דרכים שונות – שימוש ב-pseudo-element, border-image, ורקע עם גבול שקוף. פתרונות מעשיים ויעילים לשדרוג העיצוב שלכם.
בפוסט הזה גיא מצא פתרון נהדר להמיר תאריך ללוח שנה עברי בעזרת JavaScript, ללא צורך בספריות נוספות! כל מה שצריך זה להשתמש ב-Intl.DateTimeFormat, וליהנות מתאריך עברי בלחיצת כפתור. פתרון פשוט, מהיר ויעיל.
אחרי רומן קצר ומורכב עם SQL טהור, גיא מגלה שהרומנטיקה של טמפלטים ידניים מתפוגגת מול כאב תחזוקתי אמיתי — ומקבל החלטה לעבור ל-Prisma ORM. סיפור של מעבר חכם מפרגמנטציה לסדר.
גיא יוצא לבדוק את htmx — ספריית פרונטאנד חדשה שמבטיחה מהפכה קטנה בדרך שבה אנחנו ניגשים לבניית אפליקציות אינטראקטיביות, בלי לגעת ב-JavaScript. התרשמות ראשונית, יתרונות, ומלא הומור.
בפוסט הזה נכיר את הקסם של text-shadow: יצירת צל מדויק ועדין לטקסט — עם הסבר על הפרמטרים, טיפים לשימוש חכם, ואזהרות חמורות נגד עיצוב בסגנון וורד 93.
בפוסט הזה נראה איך ליצור אנימציה קלילה וחמודה של לב שפועם בעזרת CSS ו-FontAwesome, כדי שהמשתמש לא יישאר תלוי באוויר בזמן טעינה — אלא יתמלא באהבה (או לפחות בסבלנות).
בפוסט הזה נראה איך ליצור טקסט עם צבע מתחלף ב-CSS בעזרת background-clip, ולמה זה כל כך מגניב! הרקע משתנה בצורה חלקה והטקסט הופך לאלמנט עיצובי מרהיב.
הצטרפו לסיפור על מתכנתת חדת מוח ומבקר קוד חמוד שיחד יצרו פיד מבזקים עם גלילה אינסופית חלקה בעזרת CSS — והצליחו להדהים את כולם עם פתרון פשוט, אלגנטי ומגניב במיוחד.
139 תוצאות
