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

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

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

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

בואו לקבל רשימה מקיפה ביותר של משאבי פיתוח אינטרנט טריים.

גוטנברג

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

חסום פיגום

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

CGB

דרך נוספת בקלות להתחיל את גוש גוטנברג הוא יצירת גוטן בלוק (CGB) הוא כלי ליצור boilerplate לפתח גוש גוטנברג. זה מורכב של כלים מודרניים כגון React.js, Webpack, ESLint, בבל, וכו 'החלק הכי טוב שאתה לא צריך להגדיר את כל הכלים האלה כך שתוכל פשוט להתמקד בכתיבת הקוד שלך.

בלוק אלמנטור לגוטנברג

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

בלוקים אטומיים

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

חסום גלריה

בלוק המושך את העין כדי להכניס את גלריית התמונות שלך, Block Gallery מספק חוויה חלקה להוספת תמונות לפוסט שלך. כל שעליך לעשות הוא לשחרר את התמונות שלך, סגנון להציג את הגלריה (בסגנון בנייה, קרוסלה, או Fullscreen), וזה הכל מוגדר. זה, כרגע, פשוט בלוק גלריה הטוב ביותר עבור וורדפרס.

CoBlocks

חבילה של בלוקים מאותו מחבר אשר פיתח את בלוק הגלריה הנ"ל, CoBlocks מורכב ממספר בלוקים כי ישפר את תוכן האתר שלך עם אקורדיון, תמחור טבלה, GIF, לחץ כדי טוויטר, ועוד בלוקים להוספה.

StagBlocks

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

אוטר בלוקים

כמו כן, אוסף של גוטנברג בלוקים כגון “בלוק מפות Google” כדי להכניס מפה, “בלוק השירות שלנו” ל הכנס רשימת שירותים באמצעות לחצן בתצוגת רשת, ו “עדויות גוש בלוק” כדי להוסיף רשימה של עדויות. בלוק Otter הוא אוסף של גוטנברג בלוקים כי עסקים מפתח הנושא יעריכו.

גוטנברג מתקדם בלוקים

תוסף זה מגיע עם קומץ של בלוקים מתקדמים כדי להעשיר את התוכן שלך כגון תוכן העניינים שנוצר באופן אוטומטי, “ג 'יפי בלוקים” כדי לכלול תמונה GIF מ Giphy.com, “בלוק” כדי להוסיף תמונות מ- Unsplash.com, “בלוק מודעות באנר”, WooCommerce “לחסום לחצנים”, והרבה יותר.

בלוק מעבדה

Block Lab עושה את זה קל עבור מפתחים ליצור בלוק גוטנברג. תוסף מאפשר לך לרשום בלוק חדש עם GUI ידידותי למשתמש ותבניות ב- PHP. אתה אפילו לא צריך ללמוד React.js.

בלוקים של EDD

תוסף המאפשר לך לעבד קל הורדות מוצרים דיגיטליים עורך Gutenberg. בניגוד לשימוש בקיצור, הבלוק יציג תצוגות מוצרים.

מבחן גוטנברג

לא מוכן להתקין את התוסף Gutenberg או לעדכן את האתר שלך ל- WordPress 5.0? אתה יכול פשוט טען אתר זה כדי לנסות את העורך החדש.

ענן גוטנברג

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

דוגמאות של גוטנברג

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

גוטנברג

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

השבת את גוטנברג

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

עורך קלאסי

לחלופין, ניתן להתקין את התוסף כך שתוכל לשמור מעודכן וורדפרס 5.0 תוך שמירה על שימוש בעורך הקלאסי הישן. תוסף זה יתמוך עד 2022.

ClassicPress

חלופה נוספת היא לעבור מזלג וורדפרס, ClassicPress. מתמקד ClassicPress הוא ב עסקים, יציבות וביטחון. זה תואם וורדפרס plugins והיא מתכננת להביא תכונות חדשות מעניינות שלהם משחרר בעתיד. בדוק את ההודעה שלנו: ClassicPress: אלטרנטיבי WordPress ללא גוטנברג & React.js

מהירות וורדפרס

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

קוד תצוגה מקדימה של Visual Studio קוד

עורך קוד חזותי שמוסיף דפדפן אמיתי המופעל על ידי Chrome ללא ראש בתוך קוד Visual Studio. זה מאפשר לך תצוגה מקדימה של העבודה בזמן אמת ממש בתוך עורך הקוד ומאפשר תכונות כגון באגים בעורך.

Bundlesize

Bundlesize הוא כלי שמור את קובץ ה- JavaScript שלך מקבץ גודל המחאה. ניתן להגדיר את הגודל המקסימלי של כל קובץ מקובץ שלך והוא יתריע כאשר הוא בערך או העביר את הגודל המרבי שהוגדר. Bundlesize יכול להיות משולב עם שירות CI כמו TravisCI ו CircleCI עבור פריסה חלקה של זרימת עבודה בפרוייקט שלך.

WP לצאת

מודרני מסגרת WordPress נושא מבוסס על דפוס MVC. אם אתה רגיל לעבוד עם מסגרת PHP כמו Laravel ו Slim, אני בטוח שאתה באמת מעריך את המסגרת. אתה יכול להשתמש בדברים כמו נתב בקר, DI Container, ו Middlerware.

מגדלור בוט

כלי השירות המאפשר לך להפעיל מגדלור בשירות CI באמצעות Docker. זה כלי נהדר להפוך את ביצועי האתר שלך לבדיקה בכל פעם שאתה דוחף שינוי חדש בקוד האתר שלך.

למד ריאק App

למד תגובה App הוא משאב כדי ללמוד React.js. אבל בניגוד למשאבים אחרים שם בחוץ, זה צריך להיות מותקן מקומית במחשב. זה לא רק מכיל חומרי למידה אבל זה גם קוד ודגימות אינטראקטיביות. החלק הכי טוב הוא שאתה יכול לעשות את זה בזמן לא מקוון ברגע שהוא מותקן.

WP קבלה

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

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

מבריק

ספריית לחקות את ההשתקפות תאורה באתר האינטרנט שלך כאשר צפו על המכשיר הנייד. ניתן להציג את ההדגמה ב https://pqina.nl/shiny/. כדאי לציין שהוא יעבוד רק במכשיר נייד, שכן הוא מסתמך על ממשק API מסוים שזמין רק בניידים.

תגיד לוסיד

ReactLucid הוא כלי כדי לעזור לך Debug React יישומים GraphQL באופן אינטראקטיבי יותר. זה מאפשר לך לראות את היררכיה הרכיב, המדינה / פרופס שינויים בתוך היישום שלך React, כמו גם את הסכימה GraphQL, שאילתות, מוטציות בזמן אמת.

תכונות CSS

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

בלנדי

כלי שיכול לעזור לך התאמה אישית של מצבי רקע רקע CSS עם התמונה שלך. ניתן להציג תצוגה מקדימה של מצבי מיזוג, לשנות צבעים ולהחיל מעברי צבע. ניתן להשתמש בתמונות מ- Unsplash או להעלות אותו מהמחשב.

תגובה אלמנטלית

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

FX

אם אתה מתמודד לעתים קרובות עם JSON מעוצב, אני בטוח שתעריך את הכלי הזה. fx הוא כלי שורת הפקודה המאפשר לך לדמיין נתונים JSON בטרמינל עם מצב אינטראקטיבי. באופן שתוכל להרחיב או לכווץ את הנתונים. fx ניתן להתקין באמצעות NPM או Homebrew.

מוניקה

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

כמו CRM, זה מאפשר לך לעקוב אחר דברים כמו הפעילות שלך איתם, וכאשר אתה לאחרונה קרא אותם וכו 'אפילו יותר, זה יכול להיות מוגדר להזכיר לך להתקשר למישהו שלא דיברתי איתו בזמן. הם קוראים לזה PRM (Personal Relationship Manager).

מסגרת יונית

מסגרת יונית כבר בסביבה כבר זמן מה. אבל לאחרונה, זה עשה די גדול לקפוץ הפונקציונליות שלו. עכשיו לא רק שזה יותר מהיר אבל יונית עכשיו תואם עם שתי מסגרות כוכבים עולה: React.js, ו Vue.js.

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

ראוי לציון

ראוי לציון הוא יישום שולחן העבודה לוקח הערות. שלא כמו כל יישום דומה אחר, זה לא מגיע עם עיצוב קנייני, WYSIWYG, או פעמונים פעמונים אחרים ושריקות. ה עורך App מופעל בעיקר על ידי Markdown Github בטעם. הערות מאוחסנות בקובץ שטוח .md קבצים וכן את הקובץ המצורף. זה פשוט עובד ופשוט.

טיפ

TipTap הוא עורך WYSIWYG בנוי על גבי ProseMirror עם Vue.js. מלבד יורש מספר תכונות מ ProseMirror מהקופסה, כגון תמיכה תחביר Markdown מדהים, TipTap מביא כמה תכונות מודרניות כמו תפריט בועה שבו התפריט עיצוב יופיע בעת הדגשת טקסט, תכונה הצעה שבו אתה יכול לתייג או להזכיר אדם בתוך התוכן, ולייצא היכולת לייצא תוכן בפורמט JSON.

נחזור

Restplain הוא תוסף WordPress המאפשר לך ליצור בקלות תיעוד של נקודות קצה REST API שלך WordPress כולל נקודות קצה מותאמות אישית באתר שלך, כמו גם ביצוע שיחת API מתוך המסמכים. דבר אחד לציין כי הוא מסתמך על סכימת נקודת הקצה כדי ליצור את התיעוד, לכן ודא שהוספת סכימה נכונה עבור נקודות הקצה המותאמות אישית שלך.

React Content Loader

React Content Loader הוא רכיב מותאם אישית של React המאפשר לך להציג מציין מיקום של תוכן בזמן שהתוכן בפועל נטען. זה דומה לסוג מטעין שאתה רואה בפייסבוק ו Instagram .

מיתי

מיתית היא נושא המתנע וורדפרס עם שיטות עבודה מומלצות המודרנית כגון זרקת תלות, צפיות, בקרי, כמו גם כלי נוסע מודרני כגון שימוש Webpack, Sass, Linting, PHP7 דרישה מינימלית, ו- BEM. זה נושא נהדר לרמה את המיומנות שלך כמפתח מפתח.

גיתוב מזוקק

הרחבת דפדפן כדי לחדד את החוויה שלך בעת השימוש ב- Github. זה מוסיף כמה מקשים חמים שימושי, מזקקת כמה פריסות ו UIs, מוסיף באופן אוטומטי קישור בעיות PRs, ועוד הרבה יותר.

פתח את WC

Open WC הוא אוסף של כלים המאפשרים לך ליצור רכיב אינטרנט מותאם אישית. הוא כולל את הספרייה הראשית כדי ליצור רכיב אינטרנט, גנרטורים Yeoman במהירות ליצור “פתח את WC” הפרויקט, הכולל את הפיגום לבדיקה, מוך, וממשיך אינטגרציה.

WC פתוח יכול להיות חלופה טובה אם היית מעדיף ליישם עם תכונה אינטרנט הילידים ולא באמצעות מסגרת כמו Vue.js או React.js.

גרידזום

Gridsome הוא כלי לבנות אתרים סטטיים ויישומי אינטרנט עם Vue.js ו GraphQL. זה מסוגל להתמודד עם זרמי נתונים מרובים כגון מ CMS כמו WordPress ו Drupal, קובץ מקומי כמו Markdown או ימל, או API חיצוני כמו AirTable ו מרוצה. זוהי אלטרנטיבה מצוינת באמת Gatsby.js, במיוחד אם מעדיפים Vue.js מעל React.js.

הדפדפן

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

סריקה

סריקה היא מסגרת רשת מודרנית שנבנית עם מפרט HTML ו- CSS מודרני כמו CSS רשת, CSS נכס מותאם אישית (משתנה), וכן אלמנט מותאם אישית. מסגרת מושלמת עבור אלה שאוהבים לחיות על הקצוות.

הופר

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