כל מה שרציתם לדעת על פיתוח Full Stack
קבלו דרך פשוטה ואלגנטית להוסיף 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 — והצליחו להדהים את כולם עם פתרון פשוט, אלגנטי ומגניב במיוחד.
בפחות משעה בידיים (וגם זה אם תתעקשו), בניתי פרויקט קטן וחמוד ב-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! בפוסט נבין את הטריק הפשוט, למה הוא עובד, ואיך להוסיף טאץ' מגניב לטפסים ולאפליקציות.
82 תוצאות
