מבחר מאמרים בנושאי צילום, טיולים ופיתוח
במדריך הזה נלמד איך לבנות טולטיפ ב-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 — והצליחו להדהים את כולם עם פתרון פשוט, אלגנטי ומגניב במיוחד.
בפחות משעה בידיים (וגם זה אם תתעקשו), בניתי פרויקט קטן וחמוד ב-htmx: בדיחות צ'אק נוריס רנדומליות, מועדפים, קרוסלה עקשנית, ובוטסטראפ כי למה לא. חוויות, עצבים ומסקנות.
במדריך הזה תגלו איך לעצב צ'קבוקס מתקדם ב-CSS מבלי להשתמש ב-JavaScript או ב-::before. נלמד איך לנצל את ה-label כדי להסתיר את הצ'קבוקס ולשלוט בהצללות ובאייקונים השונים שמופיעים בזמן לחיצה. כל זה מבלי להוסיף שום קוד JS, רק עם CSS טהור. פתרון פשוט, מעוצב ומרשים שיגרום לממשק שלכם להיראות מקצועי יותר.
רוצים לעצב את האות הראשונה של פסקה ככותרת ענקית, כמו בספרים קלאסיים? הכירו את הטכניקה עם ::first-letter ו-initial-letter ב-CSS. פוסט קצרצר ומגניב על עיצוב טקסט בצורה מרשימה!
רעיון מגניב: תפריט נפתח רק בעזרת CSS! שילוב של checkbox, label ו-+ סלקטור בשביל תנועת toggle בלי JS בכלל. פתרון מהיר, מפתיע, ופותח את הראש לעוד אינטראקציות אינטראקטיביות.
בפוסט הזה נלמד איך להגדיר את יחס הרוחב/גובה של אלמנט בעזרת aspect-ratio ב-CSS. נדבר על השימושים השונים של המאפיין ועל איך ליצור אלמנטים גמישים שיכולים לשמור על יחס קבוע, כמו ריבועים בגודל משתנה.
מה עושים כששועל מרחף לכם בפרויקט? גיא משתף בחוויה מצחיקה ומלמדת סביב אתר שיצר עם Three.js, React ו-Tailwind, כולל נגיעה בעקרונות תלת מימד בסיסיים. בואו לראות איך שילוב של טכנולוגיה, הומור ותלת מימד יוצר חוויית גלישה בלתי נשכחת – ולמה כדאי לנסות את Three.js גם בפרויקטים הקטנים שלכם.
לגרום לאתר להרגיש כמו מופע קסמים בלי לשבור את הראש! הכירו את animation-timeline - הדרך לקשר בין הגלילה לאנימציה בצורה חכמה ואלגנטית.
אחת האנימציות הכי כיפיות - SVG שמצייר את עצמו בלי טיפת JavaScript! בפוסט נבין את הטריק הפשוט, למה הוא עובד, ואיך להוסיף טאץ' מגניב לטפסים ולאפליקציות.
לפני שהולכים לאכול אבטיח עם תיבול של חול ים 🇮🇱, הנה טיפ קריר לגלילת כרטיסים ב־CSS: איך לגרום לגלילה בציר X לעבור חלק כרטיס-כרטיס, בלי לחשב פיקסלים ובלי כאב ראש מיותר. נשתמש ב־scroll-snap-type: x mandatory; על הקונטיינר, וב־scroll-snap-align: start; על הכרטיסים. פשוט, קליל ומושלם לקרוסלות, דפדוף בין PDFים או כל מקרה אחר שבו לא רוצים לראות "חצי פריט" במסך.
שמעתם על Tailwind CSS ולא בטוחים מה עושים איתה? גיא מסביר איך הפריימוורק הזה שובר את הכללים, מחליף את Bootstrap, ומשנה לגמרי איך כותבים עיצוב אתרים – ועדיין מחייב לדעת CSS אמיתי.
הוקים מותאמים אישית ב-React מאפשרים לפתח קוד נקי וניתן לשימוש חוזר. במדריך זה נלמד על הוק useApi, יתרונותיו, חסרונותיו והשימושים האפשריים בו.
קומפוננטת Text גנרית ב-React שמתאימה לכל סוגי תגי הטקסט (h1-h6 ו-p) ומפשטת את התחזוקה והגמישות בקוד.
גיא יוצר לוח שנה בעברית ב-MVP מהיר עם פתרון פשוט. איך ניתן ליצור לוח שנה בצורה מהירה, עם הגדרת ימים, חודשים, ושמות, בלי להסתבך עם ספריות כבדות.
גיא מסביר בגובה העיניים למה MongoDB היא הבחירה המושלמת: גמישות מרשימה, תיעוד ברור, חיבור סופר מהיר לפרויקטים חדשים, ושימושיות מהממת גם בענן וגם מקומית. בלי אננס על פיצה.
149 תוצאות
