موارد جديدة لمصممي ومطوري الويب (مارس 2019)
لقد حدث الكثير خلال الأشهر القليلة الماضية في عالم تطوير الويب. أولا ، الجديد محرر قائم على الكتل ، يطلق عليه اسم غوتنبرغ, وأخيرا تم دمجها في وورد 5.0. إنه تغيير كبير حقًا منذ إنشائه لأنه يضع أساسًا جديدًا لتطور WordPress في المستقبل وسيغير الطريقة التي يمد بها المطورين وظائف WordPress.
ثانياً ، قام عدد قليل من زملائنا المطورين بإنشاء بعض الأدوات المفيدة حقًا مثل تلك التي تسمح عرض JSON في المحطة واثنين من مكتبات React التي يمكن أن تثبت مساعدة كبيرة في تصميم وتطوير المشاريع.
وأخيرا ، بعض من الأكثر فعالية الموارد ، والمراجع ، والإضافات تم إطلاقها لمساعدتك في تحديث مشاريعك وفقًا للاتجاهات الحديثة.
دعنا نحصل على القائمة الأكثر شمولية لموارد تطوير الويب الجديدة.
دليل غوتنبرغ
كتيب WordPress الرسمي حيث يمكنك البحث عن مراجع للتصميم, أمثلة التعليمات البرمجية لإنشاء كتل وغيرها ودليل للمساهمة في المشروع. هذا هو المرجع الأول لتطوير مع غوتنبرغ.
سقالة كتلة
بفضل المحرر المستند إلى الكتلة ، يوفر WP-CLI الآن طريقة ملائمة للبدء إنشاء كتلة Gutenberg باستخدام أمر CLI جديد, كتلة سقالة wp. يمكنك إنشاء وإضافته إلى الإضافات والمظاهر الموجودة لديك.
CGB
هناك طريقة أخرى لبدء تشغيل كتلة Gutenberg بسهولة وهي إنشاء Guten Block (CGB) وهي أداة توليد الغلاية لتطوير كتلة غوتنبرغ. إنه يتكون من أدوات حديثة مثل React.js ، Webpack ، ESLint ، Babel ، إلخ. الجزء الأفضل هو أنك لا تحتاج إلى تكوين أي من هذه الأدوات بحيث يمكنك ببساطة التركيز على كتابة التعليمات البرمجية الخاصة بك.
كتل عنصري لجوتنبرج
ووردبريس البرنامج المساعد الذي يسمح لك إدراج أي قوالب العنصر ومعاينته مباشرة داخل المحرر. البرنامج المساعد يأتي مع العديد من التوافقات التي توفر تجربة تحرير سلس بين عنصري وجوتنبرج. تحقق من هذا الفيديو لمعرفة كيفية عمله.
الكتل الذرية
مجموعة من كتل غوتنبرغ مع عدد متزايد من المجموعات. في وقت كتابة هذا التقرير ، فإنه يوفر “مشاركة شبكة بلوك” مما يسمح لك إضافة قائمة منشورات موقعك في تخطيط الشبكة. هناك أيضا “كتلة شهادة” والتي ، كما يوحي الاسم ، لإدراج شهادة داخل الصفحة. تحقق من معاينات كاملة من كتل في هذه الصفحة.
معرض بلوك
يعد Block Gallery كتلة جذابة لإدراج معرض الصور الخاص بك ، ويوفر تجربة سلسة لإضافة صور إلى مشاركتك. ما عليك سوى إسقاط صورك ، أو تصميم عرض المعرض (على غرار البناء ، أو Carousel ، أو ملء الشاشة) ، وسيتم إعداده بالكامل. إنها ، في الوقت الحالي ، أفضل معرض بلوك لـ WordPress.
CoBlocks
عبارة عن مجموعة من الكتل من نفس المؤلف الذي طوّر Block Block Gallery المذكور أعلاه ، تتكون CoBlocks من عدد من الكتل التي ستعمل على تحسين محتوى موقعك باستخدام الأكورديون ، جدول التسعير ، GIF ، انقر لتويتر, وأكثر من كتل ليضاف.
StagBlocks
مجموعة أخرى من كتل غوتنبرغ. يجلب البرنامج المساعد عددًا من القطع المثيرة للاهتمام التي قد يقدّرها الكثير منكم. ويشمل Stat Block الذي يسمح لك بتخصيص الإحصائيات في مشاركاتك وصفحاتك. كتلة بطاقة الموقع الذي سوف معاينة الموقع في نمط بطاقة الهوى. رمز كتلة والتي سوف تقدم رمز مع اللون المميز.
قضاعة قضاعة
أيضا ، مجموعة من كتل غوتنبرغ مثل “خرائط جوجل بلوك” لإدراج الخريطة, “خدمتنا كتلة” إلى إدراج قائمة من الخدمات مع زر في طريقة عرض الشبكة, و “شهادات منطقة كتلة” لإدراج قائمة من الشهادات. Otter Block هي عبارة عن مجموعة من Gutenberg Blocks التي ستقدرها الشركات ومطور البرامج.
كتل غوتنبرغ المتقدمة
هذا البرنامج المساعد يأتي مع حفنة من كتل المتقدمة لإثراء المحتوى الخاص بك مثل جدول المحتويات الذي تم إنشاؤه تلقائيًا, “كتل Giphy” لتضمين صورة GIF من Giphy.com, “Unsplash Block” لإدراج الصور من Unsplash.com, “إعلان بانر”, WooCommerce “إضافة إلى سلة بلوك زر”, والكثير.
مختبر بلوك
Block Lab يجعل من السهل على المطورين إنشاء كتلة Gutenberg. البرنامج المساعد يسمح لك تسجيل كتلة جديدة مع واجهة المستخدم الرسومية سهلة الاستخدام والقوالب في PHP. لا تحتاج حتى إلى تعلم React.js.
كتل EDD
البرنامج المساعد الذي يسمح لك بتقديم منتجات Easy Digital Downloads في محرر Gutenberg. على عكس استخدام الرمز القصير ، ستعرض المجموعة طرق عرض المنتج.
اختبار غوتنبرغ
لست مستعدًا لتثبيت البرنامج المساعد Gutenberg أو تحديث موقعك إلى WordPress 5.0؟ يمكنك ببساطة قم بتحميل هذا الموقع لتجربة المحرر الجديد.
غوتنبرغ كلاود
انها مثل AppStore لكتل جوتنبرج. مكان مركزي حيث يمكنك الحصول عليه كتل غوتنبرغ التي يمكن استخدامها في وورد ودروبال. نعم ، ستتبنى دروبال محرر جوتنبرج لمحررها.
أمثلة غوتنبرغ
مستودع Github لعينات الكود لإنشاء كتل غوتنبرغ. هنا يمكنك أن تجد أبسط كتلة إلى مثال أكثر تعقيدا, مثل واحد لإنشاء “كتلة وصفة” الذي يحدد قالب في محرر للمستخدمين لإضافة وصفة يحتوى. مرجع جيد لأولئك الذين يفضلون التعلم من أمثلة حقيقية ، بدلاً من كتاب نصي.
GutenbergJS
نسخة جافا سكريبت فقط من غوتنبرغ. إنها متوفرة كحزمة NPM والتي تسمح لك بدمج Gutenberg في أي تطبيق JavaScript.
تعطيل غوتنبرغ
على الرغم من أن غوتنبرغ يوفر إمكانيات جديدة لـ WordPress ، إلا أن الجميع ليس جاهزًا لذلك. إذا كانت مواقعك الحالية لا تعمل بشكل جيد مع Gutenberg ، فيمكنك تثبيت هذا البرنامج المساعد. انها تسمح لك ل تعطيل محرر غوتنبرغ بالنسبة إلى المنشورات المعينة ، وأنواع المنشورات ، وأدوار المستخدم ، والسمات ، وكذلك تعطيل أوراق أنماط غوتنبرغ في الواجهة الأمامية.
محرر كلاسيكي
بالتناوب ، يمكنك تثبيت هذا المكون الإضافي حتى تتمكن من تحديث WordPress 5.0 مع الاستمرار في استخدام المحرر الكلاسيكي القديم. سيتم دعم هذا البرنامج المساعد حتى عام 2022.
ClassicPress
بديل آخر هو التبديل إلى شوكة WordPress ، ClassicPress. يركز ClassicPress على الشركات والاستقرار والأمن. إنه متوافق مع إضافات WordPress ويعتزم تقديم ميزات جديدة مثيرة للاهتمام في الإصدارات المستقبلية. تحقق من منصتنا: ClassicPress: بديل لبرنامج WordPress دون Gutenberg & React.js
تسريع وورد
كما أصبح ووردبريس كبيرًا جدًا ؛ أكثر من مجرد منصة التدوين. أضاف Gutenberg ، على وجه الخصوص ، بعض الأحمال والرموز والملفات الإضافية إلى موقعك والتي قد تبطئ موقعك. هذه هي التفاصيل التي يمكنك الرجوع إليها لمساعدتك في تحديد نقاط الألم على موقعك ومعالجتها على أفضل الممارسات في هذا المجال.
مرئي متصفح مدونة معاينة
محرر Visual Code الذي يضيف متصفحًا حقيقيًا مدعومًا من Chrome Headless داخل Visual Studio Code. هذا يسمح لك معاينة عملك في الوقت الحقيقي مباشرة داخل محرر الكود وتمكين ميزات مثل تصحيح الأخطاء في المحرر.
Bundlesize
Bundlesize هو أداة ل احتفظ بملف JavaScript الخاص بك تجميع حجم في الاختيار. يمكنك تحديد الحد الأقصى لحجم كل ملف من ملفاتك المجمعة وسوف ينبهك عندما يكون حول أو يتجاوز الحد الأقصى للحجم المحدد. يمكن دمج Bundlesize مع خدمة CI مثل TravisCI و CircleCI لنشر سلس لسير العمل في مشروعك.
الفسفور الابيض الناشئة
حديث إطار عمل WordPress للموضوع بناءً على نموذج MVC. إذا كنت معتادًا على العمل باستخدام إطار PHP مثل Laravel و Slim ، فأنا متأكد من أنك ستقدر هذا الإطار حقًا. يمكنك استخدام أشياء مثل Router and Controller و DI Container و Middlerware.
منارة بوت
أداة مساعدة تتيح لك تشغيل Lighthouse في خدمة CI باستخدام Docker. إنها أداة رائعة ل أتمتة فحص أداء موقع الويب الخاص بك في كل مرة تقوم فيها بدفع تغيير جديد إلى رمز موقع الويب الخاص بك.
تعلم رد فعل التطبيق
تعلم React App هو مورد لتعلم React.js. ولكن على عكس الموارد الأخرى الموجودة هناك ، ينبغي أن يكون هذا تثبيت محليا في جهاز الكمبيوتر الخاص بك. إنه لا يحتوي فقط على مواد تعليمية ، ولكنه يحتوي أيضًا على الكود والعينات التفاعلية. أفضل جزء هو أنه يمكنك القيام بذلك أثناء عدم الاتصال بمجرد تثبيته.
قبول الفسفور الابيض
يعد WP Acceptance أداة جديدة تتيح لك إجراء اختبارات القبول. بكل بساطة ، اختبارات القبول هي سلسلة من اختبارات لمحاكاة سلوك المستخدم. هناك عدد من الأطر هناك لإجراء هذا النوع من الاختبار.
ومع ذلك ، إذا كنت تعمل في المقام الأول مع WordPress ، فستقدر هذه الأداة لسهولة الاستخدام لأنها مصممة ومصممة وفقًا لاحتياجات مشاريع WordPress النموذجية.
لامع
مكتبة جافا سكريبت ل محاكاة انعكاس الإضاءة على موقع الويب الخاص بك عند عرضها على الجهاز المحمول. يمكنك مشاهدة العرض التوضيحي في https://pqina.nl/shiny/. تجدر الإشارة إلى أنه سيعمل فقط على الجهاز المحمول لأنه يعتمد على واجهة برمجة تطبيقات معينة لا تتوفر إلا في الأجهزة المحمولة.
الرد وسيد
ReactLucid هي أداة لمساعدتك تصحيح React و GraphQL التطبيقات بطريقة أكثر تفاعلية. يتيح لك رؤية التسلسل الهرمي للمكونات ، وتغيير الحالة / الدعائم داخل تطبيق React ، وكذلك مخطط GraphQL والاستعلامات والطفرات في الوقت الفعلي.
المغلق ميزات تبديل
امتداد Chrome يتيح لك تعطيل بعض ميزات CSS في Chrome. باستخدام هذا ، يمكنك معرفة كيفية عرض موقع الويب الخاص بك وتصرفاته عند عدم وجود ميزات معينة. مفيد للغاية لمساعدتك في تطبيق ميزات CSS الجديدة التي قد لا يتم تنفيذها في جميع المتصفحات.
Blendy
أداة يمكن أن تساعدك تخصيص أوضاع مزيج الخلفية CSS مع صورتك. يمكنك معاينة أوضاع المزج وتغيير الألوان وتطبيق التدرجات. يمكنك استخدام الصور من Unsplash أو تحميلها من الكمبيوتر.
تتفاعل عنصري
مجموعة من عناصر React التي تعمل مباشرة خارج الصندوق. لا يوجد CSS خارجي لاستيراد التكوينات أو تخصيصها لإضافتها على Webpack. يأتي مزودًا بمكونات أساسية مثل Button و Checkbox و SelectList و Tabs و Tooltip والمزيد.
FX
إذا كنت تتعامل غالبًا مع تنسيق JSON ، فأنا متأكد من أنك ستقدر هذه الأداة. الفوركس هو أداة سطر الأوامر التي تسمح لك بتصور بيانات JSON في المحطة الطرفية مع الوضع التفاعلي. بطريقة يمكنك توسيع أو طي البيانات. الفوركس يمكن تثبيتها عبر NPM أو البيرة.
مونيكا
مونيكا تماما في فئتها الخاصة. إنه نوع من CRM (مدير علاقات العملاء) ولكن ليس مخصصًا لعميلك بل لأحبائك مثل عائلتك وأصدقائك.
مثل CRM ، يسمح لك بتتبع أشياء مثل أنشطتك معهم ، وعندما اتصلت بها آخر مرة وما إلى ذلك. بل أكثر من ذلك ، يمكن تعيينه لتذكيرك بالاتصال بشخص لم تتحدث معه منذ فترة. يسمونه PRM (مدير العلاقات الشخصية).
الإطار الأيوني
كان الإطار الأيوني موجودًا بالفعل لفترة من الوقت. لكن في الآونة الأخيرة ، حققت قفزة كبيرة في وظائفها. الآن ليس فقط أنه أسرع ولكن أيوني الآن متوافق مع إطارين للنجم الصاعد: React.js و Vue.js.
هذا يضع الأرض لأيوني ليكون أداة الملحد الإطار. لذلك ليس فقط أنه يعمل مع أطر عمل معينة ولكن أيضًا قد يعمل مع الأطر الجديدة مع تطور التطوير الأمامي في المستقبل.
ملحوظة
الجدير بالذكر هو تطبيق تدوين سطح المكتب. على عكس أي تطبيق آخر مماثل ، لا يأتي مع تنسيق خاص أو WYSIWYG أو أجراس وصفارات نموذجية أخرى. ال هو مدعوم أساسا محرر التطبيق من قبل Github النكهة تخفيض السعر. يتم تخزين الملاحظات في ملف ثابت .MD الملفات وكذلك المرفق. انها تعمل فقط وبسيطة.
TipTap
TipTap هو محرر WYSIWYG مبني على أعلى ProseMirror مع Vue.js. بصرف النظر عن توريث عدد من الميزات من ProseMirror خارج الصندوق ، مثل دعم بناء الجملة Markdown الرائع ، فإن TipTap يقدم بعض الميزات الحديثة مثل Menu Bubble حيث تظهر قائمة التنسيق عند تمييز النص ، وميزة Suggestion حيث يمكنك وضع علامة أو ذكر شخص داخل المحتوى ، وتصدير القدرة على تصدير المحتوى في تنسيق JSON.
Restplain
Restplain هو مكون إضافي لبرنامج WordPress يتيح لك بسهولة إنشاء وثائق لنقاط النهاية الخاصة بـ WordPress REST API الخاصة بك بما في ذلك نقاط النهاية المخصصة على موقعك وكذلك إجراء مكالمة API من داخل المستندات. شيء واحد هو أن نلاحظ أنه يعتمد على مخطط نقطة النهاية لإنشاء الوثائق ، لذلك تأكد من أنك قمت بإضافة مخطط مناسب لنقاط النهاية المخصصة الخاصة بك.
رد المحتوى محمل
رد المحتوى محمل هو مكون مخصص React يسمح لك بعرض عنصر نائب للمحتوى أثناء تحميل المحتوى الفعلي. إنه مشابه لنوع برنامج التحميل الذي تراه على Facebook و Instagram .
أسطوري
Mythic هي سمة بداية WordPress مع أفضل الممارسات الحديثة مثل Dependency Injection و Views و Controllers ، بالإضافة إلى الأدوات الحديثة مثل استخدام Webpack ، ساس ، لينتينج ، PHP7 الحد الأدنى من المتطلبات ، و BEM. إنه موضوع رائع رفع مستوى مهارتك كمطور للموضوع.
المكرر جيثب
امتداد متصفح لتحسين تجربتك عند استخدام Github. يضيف العديد من مفاتيح الاختصار المفيدة ، ويحسّن بعض المخططات ووحدات واجهة المستخدم ، ويضيف تلقائيًا رابطًا للقضايا والعلاقات العامة ، والكثير غير ذلك.
افتح مرحاض
Open WC عبارة عن مجموعة من الأدوات التي تسمح لك بإنشاء Custom Web Component. ويشمل المكتبة الرئيسية لإنشاء مكون ويب ، مولدات Yeoman لإنشاء بسرعة “افتح مرحاض” المشروع ، والذي يتضمن سقالة للاختبار, linting, ويستمر التكامل.
فتح مرحاض يمكن أن يكون بديلا جيدا إذا كنت تريد تفضل التنفيذ باستخدام ميزة الويب الأصلية بدلاً من استخدام إطار عمل مثل Vue.js أو React.js.
Gridsome
Gridsome هو أداة لبناء مواقع ثابتة وتطبيقات الويب باستخدام Vue.js و GraphQL. إنه قادر على التعامل مع تدفقات بيانات متعددة مثل من CMS مثل WordPress و Drupal ، أو ملف محلي مثل Markdown أو Yaml ، أو API خارجي مثل AirTable و Contentful. هذا بديل رائع حقًا لـ Gatsby.js ، خاصةً إذا كنت تفضل Vue.js على React.js.
المتصفح
هذا هو المتصفح كما يتصور مخترع شبكة الويب العالمية نفسه ، تيم بيرنرز لي. انه متصفح بسيط لتقديم HTML ولا يعرض شريط العنوان مثل المستعرض الحديث ولكن يمكنك عرضه من خلال الانتقال إلى المستند> فتح من مرجع المستند الكامل والصق في URL وانقر افتح. وسترى كيف سيعرض موقعك مع المتصفح الأصلي.
النقطية
Raster هو إطار شبكة حديث تم تصميمه باستخدام مواصفات HTML و CSS الحديثة مثل CSS Grid و CSS Custom Property (Variable) والعنصر المخصص. إطار مثالي لأولئك الذين يحبون العيش على الحواف.
هوبر
مكون Vue.js لإضافة دائري أو شريط تمرير. يمكن الوصول إليها وقابلة للاستخدام من خلال اللمس ولوحة المفاتيح ولوحة الماوس والتنقل المساعد الآخر ، كما أنها تدعم RTL والاتجاه الرأسي وقابل للامتداد والاستجابة بالطبع.
