בלוג
תוכן מקצועי ומעשיר בנושאים שיעניינו אותך
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, כדי שהמשתמש לא יישאר תלוי באוויר בזמן טעינה — אלא יתמלא באהבה (או לפחות בסבלנות).
4 ביולי 2024
Full Stack>>פרונט אנד
איך ליצור טקסט עם צבע מתחלף ב-CSS בעזרת background-clip
בפוסט הזה נראה איך ליצור טקסט עם צבע מתחלף ב-CSS בעזרת background-clip, ולמה זה כל כך מגניב! הרקע משתנה בצורה חלקה והטקסט הופך לאלמנט עיצובי מרהיב.
12 ביוני 2024
Full Stack>>פרונט אנד
סיפור קצר על פיד מבזקים אוטומטי וקסם ב-CSS
הצטרפו לסיפור על מתכנתת חדת מוח ומבקר קוד חמוד שיחד יצרו פיד מבזקים עם גלילה אינסופית חלקה בעזרת CSS — והצליחו להדהים את כולם עם פתרון פשוט, אלגנטי ומגניב במיוחד.
12 ביוני 2024
Full Stack>>תכנות Full Stack
פרויקט htmx קטן למי שרוצה לצחוק, להתלכלך, ולא לעבוד קשה
בפחות משעה בידיים (וגם זה אם תתעקשו), בניתי פרויקט קטן וחמוד ב-htmx: בדיחות צ'אק נוריס רנדומליות, מועדפים, קרוסלה עקשנית, ובוטסטראפ כי למה לא. חוויות, עצבים ומסקנות.
11 ביוני 2024
Full Stack>>פרונט אנד
עיצוב צ'קבוקס מתקדם ב-CSS ללא JS או ::before – איך לעשות את זה נכון?
במדריך הזה תגלו איך לעצב צ'קבוקס מתקדם ב-CSS מבלי להשתמש ב-JavaScript או ב-::before. נלמד איך לנצל את ה-label כדי להסתיר את הצ'קבוקס ולשלוט בהצללות ובאייקונים השונים שמופיעים בזמן לחיצה. כל זה מבלי להוסיף שום קוד JS, רק עם CSS טהור. פתרון פשוט, מעוצב ומרשים שיגרום לממשק שלכם להיראות מקצועי יותר.
6 ביוני 2024
Full Stack>>פרונט אנד
מעצבים אות ראשונה ענקית ב-CSS כמו ספרים עתיקים
רוצים לעצב את האות הראשונה של פסקה ככותרת ענקית, כמו בספרים קלאסיים? הכירו את הטכניקה עם ::first-letter ו-initial-letter ב-CSS. פוסט קצרצר ומגניב על עיצוב טקסט בצורה מרשימה!
5 ביוני 2024
Full Stack>>פרונט אנד
תפריט מובייל נפתח ב-CSS בלבד — בלי טיפת JavaScript
רעיון מגניב: תפריט נפתח רק בעזרת CSS! שילוב של checkbox, label ו-+ סלקטור בשביל תנועת toggle בלי JS בכלל. פתרון מהיר, מפתיע, ופותח את הראש לעוד אינטראקציות אינטראקטיביות.
8 במאי 2024
Full Stack>>פרונט אנד
מה זה יחס אלמנט ב-CSS ואיך להשתמש ב-aspect-ratio?
בפוסט הזה נלמד איך להגדיר את יחס הרוחב/גובה של אלמנט בעזרת aspect-ratio ב-CSS. נדבר על השימושים השונים של המאפיין ועל איך ליצור אלמנטים גמישים שיכולים לשמור על יחס קבוע, כמו ריבועים בגודל משתנה.
7 במאי 2024
Full Stack>>פרונט אנד
מה קורה כששועלים מעופפים נפגשים עם Three.js?
מה עושים כששועל מרחף לכם בפרויקט? גיא משתף בחוויה מצחיקה ומלמדת סביב אתר שיצר עם Three.js, React ו-Tailwind, כולל נגיעה בעקרונות תלת מימד בסיסיים. בואו לראות איך שילוב של טכנולוגיה, הומור ותלת מימד יוצר חוויית גלישה בלתי נשכחת – ולמה כדאי לנסות את Three.js גם בפרויקטים הקטנים שלכם.
17 באפריל 2024
Full Stack>>פרונט אנד
אנימציות מבוססות גלילה בקלות: הכירו את animation-timeline
לגרום לאתר להרגיש כמו מופע קסמים בלי לשבור את הראש! הכירו את animation-timeline - הדרך לקשר בין הגלילה לאנימציה בצורה חכמה ואלגנטית.
11 באפריל 2024
Full Stack>>פרונט אנד
איך לגרום ל-SVG "לצייר את עצמו" בעזרת CSS בלבד
אחת האנימציות הכי כיפיות - SVG שמצייר את עצמו בלי טיפת JavaScript! בפוסט נבין את הטריק הפשוט, למה הוא עובד, ואיך להוסיף טאץ' מגניב לטפסים ולאפליקציות.
4 באפריל 2024
Full Stack>>פרונט אנד
איך לגרום לגלילה בציר X לעצור בדיוק על כרטיסים עם CSS בלבד
לפני שהולכים לאכול אבטיח עם תיבול של חול ים 🇮🇱, הנה טיפ קריר לגלילת כרטיסים ב־CSS: איך לגרום לגלילה בציר X לעבור חלק כרטיס-כרטיס, בלי לחשב פיקסלים ובלי כאב ראש מיותר. נשתמש ב־scroll-snap-type: x mandatory; על הקונטיינר, וב־scroll-snap-align: start; על הכרטיסים. פשוט, קליל ומושלם לקרוסלות, דפדוף בין PDFים או כל מקרה אחר שבו לא רוצים לראות "חצי פריט" במסך.
19 במרץ 2024
Full Stack>>פרונט אנד
מה זה Tailwind CSS ולמה כולם מדברים עליה?
שמעתם על Tailwind CSS ולא בטוחים מה עושים איתה? גיא מסביר איך הפריימוורק הזה שובר את הכללים, מחליף את Bootstrap, ומשנה לגמרי איך כותבים עיצוב אתרים – ועדיין מחייב לדעת CSS אמיתי.
15 בפברואר 2024
Full Stack>>REACT
הוקים מותאמים אישית ב-React: איך ליצור ולהשתמש ב-useApi
הוקים מותאמים אישית ב-React מאפשרים לפתח קוד נקי וניתן לשימוש חוזר. במדריך זה נלמד על הוק useApi, יתרונותיו, חסרונותיו והשימושים האפשריים בו.
128 תוצאות
כמות בדף