משאבים חדשים עבור מעצבי אתרים ומפתחים (יוני 2015)

האם אתה יכול להאמין כי סדרה זו פועלת כבר כמעט 3 שנים? בזמן קצר זה, יש לנו בהשתתפות לפחות 30 רשימות של המשאבים הטריים ביותר עבור מעצבי אינטרנט ומפתחים. ואנחנו הולכים לשמור את זה הולך עם אוסף חדש עבור יוני.

בקומפילציה זו נבחן מספר ספריות JavaScript להצגת מחוונים, גלילה חלקה יותר לטבלאות נתונים, אפקט מעלית קריר ללחצן גלילה אל הדף ועוד.

בואו נבדוק אותם.

סגנון בינוני אישור

המדיום זכה לשבחים על עיצובו; את הפריסה ואת ממשק המשתמש נראה חשבתי ביסודיות. נוסף על כך, זה גם מעורר מפתחי אינטרנט לפתח ספריות JavaScript או CSS כדי לשכפל את ממשק המשתמש. אישור סגנון בינוני הוא ספריית JavaScript אחת הדומה לתיבה המוקפצת או בתיבת הדו-שיח 'בינוני'.

פינגווין

פינגווין הוא מסגרת חזית חדשה, כי אתה יכול להשתמש בתור תשתית של אתרי האינטרנט שלך. עם כלים כמו Grunt ו Sass, אתה יכול בקלות להוסיף או להסיר ספריות או CSS שאתה לא צריך מחוץ למסגרת עושה את זה קל ככל האפשר. זוהי גם חלופה טובה עבור Bootstrap וקרן.

מעלית

האם ראית כפתור זה באתר המאפשר לך להחליק עד החלק העליון של הדף? רוב הכפתורים פשוט לוקחים אותך למעלה, אבל עם Elevator.js, אתה מקבל אפקט האצת הזזה דומה למעלית, המוסיקה, ואת “דינג!” צליל ברגע שהגענו לקומה העליונה. נחמד מאוד!

X- Instagram

X-Instagram הוא אלמנט מותאם אישית פולימר מושך ומראה תמונות מ Instagram לפי תג. אלמנט זה עושה את התהליך כולו הרבה יותר קל. אנו פשוט מוסיפים את האלמנט בדיוק כמו אלמנט HTML רגיל ומציינים את מילת המפתח של התווית כמאפייני האלמנט.

ולתת לקסם להתחיל!

קמאן

קמאן היא ספריית JavaScript מעולה עבור מניפולציה התמונה. זה בא עם תכונה להגדיר כי היית בדרך כלל למצוא עורך תמונות. אתה יכול להפוך את התמונה לטשטש, שחור ולבן, ואפילו להגדיל את הניגודיות.

אשכול

Clusterize.js היא ספריית JavaScript אשר יגדיל את הביצועים כאשר מתמודדים עם הרבה נתונים בטבלאות. כפי שאתה לגלול למטה עם שולחן, למשל, 5000 ברשימה, בדרך כלל החוויה יהפוך laggy ו מטומטם. זה ספריות JavaScript יהיה לטפל בבעיה זו, מה שהופך את הפעולה גלילה חלקה שיט לאורך כל הדרך.

שב את המבחן

שב את המבחן היא אוסף של שאלות כדי להעריך את המיומנות והידע שלך ב- CSS3, HTML5 ו- JavaScript. כל בדיקה ניתנת מספר שאלות וזמן מוגבל כדי להשלים את כל השאלות האלה. זה מקור טוב לגלות כמה טוב אנחנו באמת עם השפות האלה.

חצים HTML

זהו אוסף של סמלים ייחודיים Unicode יליד שאתה יכול להטביע ב- HTML ו- CSS. תווים אלה כוללים חצים, מטבע ופיסוק. אתה תמצא את זה, לפעמים, אתה לא צריך סמל גופן כדי להציג את התווים.

פליקיטי

Flickity היא ספריית JavaScript להצגת קרוסלות, גלריות או מחוונים באתר שלך. הוא מותאם במיוחד עבור מסך מגע; אתה יכול להחליק את הקרוסלות ללא מאמץ עם אצבע, או את לוח העקיבה אם אתה על מחשב נייד. זה גם מגיע עם חבורה של אפשרויות המאפשר התאמה אישית מלאה בכל דרך שתרצה.

הקלדה

Typeslab הוא כלי שימושי ליצירת כרזה מסוג לוח. כל שעליך לעשות הוא לכתוב את התוכן ולבחור את הגופן, Typeslab יפיק את הפוסטר באופן מיידי. לאחר מכן תוכל להוריד אותו או לפרסם אותו ב- Imgur.

MatchMedia

Matchmedia היא ספריה המשכפלת שאילתות מדיה CSS. הספרייה היא לא ממש טרי, אבל זה ספרייה שימושי באמת כי החלטתי לשים על הרשימה. אם אתה צריך לעשות scripting מבוסס על גודל המשתמש Viewport או סוג מדיה זה הספרייה שאתה רוצה.

להלן דוגמה המשמשת להפעלת Script בגודל 320px ומעל גודל תצוגה:

 אם (matchMedia ('מסך בלבד ו- (max-width: 320px)'). 

סאס בורגר

סאס בורגר מגיע עם Mixin המאפשר לך ליצור “המבורגר” סמל ולהפוך אותו סימן חוצה עם פחות טרחה.

מרקס

מרקס הוא אוסף של כללי סגנון CSS כדי להפוך את סגנונות האלמנט לעקביים יותר. זה להתאמה אישית (עם סאס), קל, ועובד מתוך הקופסה. אלטרנטיבה טובה לכלים פופולריים כמו CSS, כמו Normalize.css.

CSS.js

CSS.js משמש כדי לנתח קבצי CSS עבור הצהרת סגנון. הספרייה שימשה בתחילה עבור צוות ב- Jotform כדי לבנות חוויית WYSIWYG עבור עריכת טופס עם CSS. עכשיו יש להם את המקור פתוח עבור כולנו להשתמש. שווה לחסוך, רק במקרה שאתה צריך את זה מאוחר יותר.