synonym search
1.0.0
قاموس ذو معنى
تذكر كل الكلمات التي تجدها عند استخدام المعجم.
يساعدك SynonymSearch على مراجعة ما تعلمته للتو (وربما تنساه بطريقة أخرى) عن طريق فرز قائمة بجميع استعلامات البحث الخاصة بك حسب تعريفاتها المشتركة عندما تجدها.
يتيح لك SynonymSearch اختبار تشابه الكلمات المترادفة عن طريق إدخالها في جملة يعتمد معناها على التعريف الذي تشترك فيه. يساعدك التطبيق على فهم التعريف بشكل فعال ومن ثم مراجعته مقابل مستودع المرادفات.
تم تطوير هذا المشروع كجزء من وحدة الواجهة الأمامية التفاعلية MS2 في Code Institute. تمت كتابته للعمل مع تنسيق استجابة JSON الخاص بـ Merriam-Webster’s Collegiate® Thesaurus، وتم تطويره باستخدام React عبر Next.js، وتم تشغيله باستخدام create-next-app ونشره باستخدام Vercel.
يرجى زيارة المشروع هنا: Synonyms.vercel.app
ملاحظة للرجوع إليها: تم تسمية المخطط السابق باسم "المطارد المرادف"
بدأت النماذج التخطيطية بالحجم الطبيعي في أوائل يناير 2021 لإنشاء علاقات بين المكونات المتباينة، وتعيين المسؤوليات المناسبة.
وقد ساعد هذا النهج في تفصيل نطاق المشروع، والأهم من ذلك، توفير معيار مرجعي للتطوير واستكشاف الأخطاء وإصلاحها.
راجع التفكير في رد الفعل (Docs)
{Results} => {Root} => {Sense} => {Option} (راجع دليل النتائج)
{Saves} => {Selection} (راجع دليل الحفظ)
{Results} =>{Root} => {Sense} عبر {ReplaceSubStringNode} (راجع string.helper.js). تم تقسيمها الآن إلى {Saves} => {Selection} (انظر العرض) 
{Sense} => {Option} في شجرة النتائج (راجع دليل النتائج) يتم تطبيق حد علوي وسفلي متسق على جميع العقد ذات المحتوى الديناميكي. تم تصميم هذه الحدود المنفصلة لنقل الحجم المادي للوحة الملاحظات كنقطة اتصال مألوفة للمستخدم. تختلف wordBoxes هذه فقط في المسافات وتكون مسؤولة عن نقل التسلسل الهرمي بشكل مرئي في قائمة القوائم .
ThemeProvider الخاص بـ Material-UI بتغليف التطبيق لتمرير الأنماط إلى أسفل شجرة المكونات. راجع سمات واجهة المستخدم المادية. يتم تعيين عائلة الخطوط على مجموعة من خطوط النظام من أجل التكيف مع تكوين الجهاز/النظام الأساسي/المستخدم وتجنب الاعتماد على محرف صريح. يحتوي كائن commonSettings في theme.context.js على قائمة بهذه التجاوزات، والتي تم دمجها مع موفر السمات الخاص بـ Material-UI. راجع Material-UI Global-css
export const commonSettings = {
typography : {
fontFamily : [
'-apple-system' ,
'BlinkMacSystemFont' ,
'"Segoe UI"' ,
'Roboto' ,
'"Helvetica Neue"' ,
'Arial' ,
'sans-serif' ,
'"Apple Color Emoji"' ,
'"Segoe UI Emoji"' ,
'"Segoe UI Symbol"' ,
] . join ( ',' ) ,
} ,
} يتميز التطبيق بمجموعتين من الألوان الأساسية والثانوية لموضوع فاتح وموضوع داكن تم تكوينهما عبر تكوين لوحة ألوان واجهة المستخدم. تعتمد السلوكيات وحالات الألوان على الخصائص المحددة في كائن السمة الافتراضية لـ Material-UI. يتم تعيين الألوان الثانوية على درجة محايدة، بينما يتم عرض الألوان الأساسية على أنها "لون مميز" فردي. الحد الأدنى من النهج لمجموعات الألوان هو تحسين المفكرة
const lightTheme = createMuiTheme ( {
palette : {
type : 'light' ,
primary : {
main : '#ff3200' ,
} ,
secondary : {
main : grey [ 900 ] ,
} ,
} ,
... commonSettings ,
} ) ; const darkTheme = createMuiTheme ( {
palette : {
type : 'dark' ,
primary : {
main : lightblue [ 500 ] ,
} ,
secondary : {
main : '#fafafa' ,
} ,
background : {
default : '#151515' ,
} ,
} ,
... commonSettings ,
} ) ; تم تصميم موقع الويب كتطبيق ويب تقدمي لعرض وظائف تطبيق صفحة واحدة دون إعادة تحميل الصفحة بالكامل وتحسينه ليعمل مثل التطبيق الأصلي. يضمن إطارها المرونة عبر المتصفحات.
يستفيد موقع الويب من أزرار الإجراءات العائمة الكبيرة (FAB) للتنقل بسرعة بين طرق العرض الثلاثة البعيدة: "بحث" و"معلومات" و"حفظ". يتم استخدام الاستعارات المرئية لتمثيل أوضاع العرض هذه بشكل منفصل وفعال.
يستمر زر "الاتصال السريع" العائم عبر طرق العرض للوصول بسرعة إلى الإجراءات الأساسية للتطبيق: الاستعلام عن مصطلح، ومسح السجل المحفوظ، وتبديل الوضع الفاتح أو الداكن.
يتميز التطبيق بشاشة تشغيل مخصصة عند التحميل الأولي للصفحة لوصف الغرض منه بإيجاز: "تطبيق قاموس المرادفات التفاعلي".
jsx و jss js . (تم التشغيل باستخدام Nestjs)next التطوير، next build للإعداد للإنتاج، next start في الخدمة.commit بـ Git push إلى GitHub.push المتزامنة عبر Git. تتم كتابة الأنماط بلغة jss وتتبع مواصفات Material-UI لتعمل بشكل جيد مع العرض من جانب خادم Nextjs، والذي يتضمن منطق تخصيص pages/_document لإدخال الأنماط المعروضة من جانب الخادم في الترميز قبل استخدامه مباشرة. لاحظ أن هذه توصية غير رسمية، ويجب إعادة هيكلتها إذا/عندما أصدرت MUI مكونًا إضافيًا رسميًا لـ Nextjs مشابهًا لتلك الخاصة بـ MUI/Gatsby.
يتم إنشاء جميع كائنات الأنماط باستخدام ربط makeStyles الخاص بـ MUI واتباع الإرشادات في مستندات نمط MUI الخاصة بالموضوعات. يتضمن ذلك تجاوزات CSS واستعلامات الوسائط. يتم فصل كائنات النمط الخاصة بالمكونات الرئيسية حسب النطاق في دليل الأنماط ويتم استيرادها في الوحدات النمطية كما هو مطلوب. ومع ذلك، فإن بعض المكونات، وهي Launcher ، تحتوي على كافة خصائص النمط المعلن عنها في ملف المكون نفسه. لاحظ أنه يجب في النهاية تصدير جميع الأنماط من دليل واحد لتحقيق الاتساق.
تعرض شجرة results مكونات jsx في كل استدعاء لواجهة برمجة التطبيقات (API) دون تهيئة الثوابت. تتحكم الدعائم والتعبيرات الشرطية في تكرار مخطط الاستجابة من MW-Thesaurus API. لاحظ أن القيم وعمليات التحقق من نوع Prop-Type مكتوبة خصيصًا للحصول على البيانات الصحيحة من هذا المخطط:
يحتفظ كل مثيل كلمة محفوظة بخصائص عائلة النتائج التي "مأخوذة" منها - مثل تعريف الكلمة المحدد، والتسمية، والكلمة الجذرية - لزيادة قيم التكرارات وتجميع الكلمات حسب تعريفات المعنى مع ضمان كل مثيل، بغض النظر عن التطابق في القيمة الاسمية، يختلف إذا كان التعريف والمعنى مختلفين
يتم تجميع خطافات React useReducer و useContext و createContext معًا في context/words.context (راجع HistoryProvider) لتوفير غلاف سياق للمكونات لمشاركة نفس البيانات واستهلاكها. لاحظ أن هذا المنطق تم تصميمه مباشرة من المثال الموجود في next.js/examples/with-context-api.
باتباع ما تم تحقيقه بواسطة خطافات مجمّع السياق المصدرة لـ HistoryProvider useHistory و useDispatchHstory - والتي يتم استخدامها عبر المكونات ذات الترتيب الأعلى والمكونات المشتركة والوظائف المساعدة في helpers/* لمعالجة DOM بشكل جذري - يتم إعادة استخدام نفس المنطق لركوب عدة الخطافات على طول غلاف مخصص باستخدام ThemeProvider الخاص بـ MUI (راجع ThemeProvider). في هذه الحالة، يتيح تعيين قيمة العرض لأي مكون تغيير الصفحة من أي مكان، على سبيل المثال لا الحصر. لاحظ أن الطبيعة الشاملة لموفر تخطيط السياق هذا.
export const ThemeContextProvider = ( { children } ) => {
// Sets the theme for MUI ThemeProvider to use
const [ darkMode , setDarkMode ] = useState ( false ) ;
// Sets the current view
const [ value , setValue ] = useState ( 'launch' ) ;
// Hooks to set warning colors for searchText input
const [ meta , setMeta ] = useState ( true ) ;
const [ root , setRoot ] = useState ( '' ) ;
// Rides an MUI hook to set a memoized theme
const prefersDarkMode = useMediaQuery ( '(prefers-color-scheme: dark)' ) ;
useMemo (
( ) => ( prefersDarkMode
? setDarkMode ( true )
: setDarkMode ( false ) ) ,
[ prefersDarkMode ] ,
) ;
// Provides all values and the hooks that control them
return (
< ThemeDispatchContext . Provider
value = { {
darkMode ,
setDarkMode ,
value ,
setValue ,
meta ,
setMeta ,
root ,
setRoot ,
} }
>
< ThemeProvider
theme = {
darkMode
? darkTheme
: lightTheme
}
>
{ children }
< / ThemeProvider >
< / ThemeDispatchContext . Provider >
) ;
} ;
// All state/hooks are accessible by importing
// a catch-all export below
// Example:
// // anyFile.js
// import { useDispatchTheme } from './../theme.context'
//
// const dispatch = useDispatchTheme()
//
// Change any/all states from any component
// dispatch.setDarkMode(false)
// dispatch.setValue('search')
//
export const useDispatchTheme = ( ) => useContext ( ThemeDispatchContext ) ;
إن استخدام MW-Thesaurus مجاني للأغراض غير التجارية و/أو التعليمية. شعارات العلامة التجارية المميزة في علامة تبويب المعلومات هي اتباع إرشادات العلامة التجارية التي يطلبها مركز تطوير Merriam-Webster على سبيل المثال لا الحصر.
مفتاح Thesaurus API المسجل المرتبط بهذا المشروع متاح للعامة حاليًا. بعد هذه المناقشة، فإن الجهود المبذولة لحماية استدعاءات واجهة برمجة التطبيقات (API) من جانب العميل لا هدف لها حيث سيتم كشف المفتاح الخاص دائمًا. يجب مراعاة التكوين الإضافي للحصول على نقطة نهاية داخلية في /pages/api باتباع مسارات Nextjs API. لاحظ أنه تم الكشف عن المفتاح من .env.local للأسباب المذكورة أعلاه ولأغراض تعليمية للمشروع.
const axiosConfig = { baseURL : 'https://dictionaryapi.com/api/v3/references/' , } ;
function searchThesaurus ( searchText , selection ) {
const query = selection || searchText ;
// Key is processed from ignored env.local
// use this method if API endpoint is set up in /pages/api/*
const key = process . env . MW_THESAURUS_KEY ;
// @note Key is explicitly declared otherwise
// for Production/submission
return axiosGetCancellable (
`/thesaurus/json/ ${ query } ?key= ${ key } ` ,
axiosConfig ,
) ;
}ملاحظة: يمكن العثور على جميع أوصاف الأساليب غير النمطية ضمن كتل التعليقات التي تتبع معايير jsDoc.
يتوقع المستخدم رؤية الوصف خلال ثوانٍ قليلة من وصوله إلى الموقع
Launcher :useEffect بدون أي تبعيات يسمح بتشغيل Launcher مرة واحدة عند التحميل الأولي للصفحةuseContext لـ Launcher بتعيين value عرض الصفحة الحالية على " search " بعد انتهاء المهلة.Synonym Search An Interactive Thesaurus App " لمدة ثانيتين ونصف عند وصوله إلى الموقع. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Launcher = ( ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ open , setOpen ] = useState ( true ) ;
const [ showOpen , setShowOpen ] = useState ( true ) ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
setShowOpen ( false ) ;
setTimeout ( ( ) => {
setOpen ( false ) ;
viewDispatch . setValue ( 'search' ) ;
} , 350 ) ;
} , 2500 ) ;
} , [ ] ) ;
return (
< >
< Backdrop
className = { classes . backdrop }
open = { open }
/ >
< Grow
in = { showOpen }
unmountOnExit
>
< Box className = { classes . launch } >
{ ... excerpt . . . }
Synonym
/Search
An Interactive Thesaurus App
{ ... excerpt . . . }
< / Box >
< / Grow >
< / >
) ;
} ;
يريد المستخدم التنقل بسرعة بين طرق العرض
Speed (Dial) :onClick .FixedBottom (متشعب من FixedBottom) Speed Dial السفلي بالتحرك بشكل مستجيب فوق الأشرطة السفلية على الهاتف المحمول عند التمرير.useScrollTrigger Speed Dial بتبديل عناصر الرؤية باستخدام ScrollTop ، وهو زر إجراء عائم، عند النقر عليه، يقوم بتمرير النافذة مرة أخرى إلى أعلى الصفحة عبر رابط id="back-to-top" .Search إلى Speed Dial لتنشيط onSearchTextChange ، وهي وظيفة ترسل الاستعلامات إلى واجهة برمجة تطبيقات Thesaurus.useState لـ useEffect بإغلاق SpeedDial دائمًا عندما تتغير value الصفحة عبر useDispatch ، إلا عندما يكون Search active .ToggleTheme ، Search ، ClearSavesSpeedDialSpeedDial مفتوحToggleThemenot هذا <mode>SpeedDial مغلقSavesSpeedDialSpeedDial مفتوحSearchSpeedDial لا يزال مفتوحاSearchSpeedDial يختفيScrollTopScrollTopSpeedDialx و y (لأعلى/لأسفل في طرق العرض، لليسار/لليمين بين طرق العرض) بسرعة عن طريق النقر فوق إجراءات SpeedDial لطرق العرض التي يمثلونها. بالإضافة إلى ذلك، يمكن الوصول إلى زر التنقل لكل عرض في رأس الصفحة. طريقتا العرض الأخريان هما Saves و Info ، وهما من نفس عائلة أزرار الإجراء العائمة مثل الإجراءات الموجودة داخل SpeedDial . يلعب الاتساق والتفرد في الموضوع واللون وواجهة المستخدم دورًا في نبضات المستخدم وإلمامه بنقطة الاتصال المستمرة المنقولة. import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Speed = ( {
children ,
value ,
index ,
searchText ,
loading ,
onSearchTextChange ,
... other
} ) => {
const trigger = useScrollTrigger ( ) ;
const classes = useStyles ( ) ;
const [ open , setOpen ] = useState ( false ) ;
const [ direction , setDirection ] = useState ( 'up' ) ;
const matches = useMediaQuery ( '(min-width:600px)' ) ;
const viewDispatch = useDispatchTheme ( ) ;
const view = viewDispatch . value ? viewDispatch . value : null ;
const handleClick = ( event ) => setOpen ( ! open ) ;
open && trigger ? setOpen ( false ) : null ;
useEffect ( ( ) => {
setTimeout ( ( ) => {
if ( viewDispatch . value !== 'search' ) {
setOpen ( false ) ;
}
} , 10 ) ;
} , [ view ] ) ;
return (
< Slide appear direction = "up" in = { ! trigger } >
< FixedBottom offset = { matches ? 16 : 48 } >
< SpeedDial
ariaLabel = "actions"
className = { classes . speedDialGroup }
FabProps = { {
className : clsx ( classes . speedDial , classes . bottom ) ,
size : matches ? 'medium' : 'small' ,
style : { padding : matches ? '12px' : '8px' } ,
} }
onClick = { handleClick }
open = { open }
direction = { direction }
>
{ ... Search action }
{ ... Toggle theme action }
{ ... Clear cache action }
/ >
< / SpeedDial >
< / FixedBottom >
< / Slide >
) ;
} ;
export default Speed ;
يريد المستخدم رؤية مصادر موثوقة
Brands (Material-UI AvatarGroup ):useEffect لـ useState بقلب الهوامش عندما يتم تعيين قيمة الصفحة على view الحالي => Info ، مما يحرك الصور الرمزية للتوسع كما لو كانت للترحيب بالمستخدم في مكتب المعلومات، بينما تظهر فقرة قصيرة لوصف " SynonymStory " خلف "" SynonymSearch ""Logo ، واحدة لكل منها: React و NextJS و MaterialUI و CodeInstitute و Merriam-Webster .SearchInfoInfoBrandsMerriam-WebsterMerriam-Webster Developer Center websiteInfo import React , { useEffect , useState } from 'react' ;
import { useDispatchTheme } from '../../context/theme.context' ;
const Brands = ( { children } ) => {
const classes = useStyles ( ) ;
const viewDispatch = useDispatchTheme ( ) ;
const [ active , setActive ] = useState ( false ) ;
const { value } = viewDispatch ;
useEffect ( ( ) => {
if ( value === 'info' ) {
setTimeout ( ( ) => {
setActive ( true ) ;
} , 750 ) ;
}
} , [ ] ) ;
return (
< AvatarGroup
className = {
clsx (
classes . avatarGroup , active
? classes . active
: classes . inactive ,
)
}
>
< Logo
name = "React"
url = "https://react.org/"
path = "/images/reactLogo.png"
/ >
< Logo
name = "Next JS"
url = "https://nextjs.org/"
path = "/images/nextJSLogo.svg"
/ >
< Logo
name = "Material UI"
url = "https://material-ui.com/"
path = "/images/materialUILogoLight.png"
darkImage = "/images/materialUILogoDark.png"
/ >
< Logo
name = "Code Institute"
url = "https://codeinstitute.net/"
path = "/images/codeInstituteLogo.png"
/ >
< Logo
name = "Merriam-Webster"
url = "https://dictionaryapi.com/"
path = "/images/merriamWebsterLogoLight.png"
/ >
< / AvatarGroup >
) ;
} ;
يريد المستخدم البحث عن المرادفات
Search :loading : ما إذا كان يتم تحميل النتائج،meta : ما إذا كان إدخال المستخدم يؤدي إلى نتيجة صالحة،root : ما إذا كان العنصر الأول في مصفوفة النتائج يطابق ما كتبه المستخدم.useState لهذه الشروط بالتغيير ديناميكيًا.useRef بمكون الإدخال، ويسمح لأحداث المفاتيح والماوس focus المشروط على موجه الإدخال بناءً على الشروط المذكورة أعلاه.Field , Input .SearchSearch في الرأسimmediately successful word >immediately successful wordSearch في الرأسincomplete word >real word >real wordSearch في الرأسa word with no matches >good word >new word const Field = ( {
label ,
onChange ,
placeHolder ,
helperText ,
loading ,
} ) => {
const theme = useTheme ( ) ;
const trigger = useScrollTrigger ( ) ;
const [ active , setActive ] = useState ( false ) ;
const textInput = useRef ( null ) ;
const metaDispatch = useDispatchTheme ( ) ;
const { meta , root } = metaDispatch ;
const handleSearchButton = ( ) => {
setActive ( true ) ;
setTimeout ( ( ) => {
textInput . current && textInput . current . focus ( ) ;
} , 100 ) ;
} ;
const handleClickAway = ( ) => setActive ( false ) ;
const handleBackDrop = ( ) => setActive ( false ) ;
const onKeyPress = ( ) => setActive ( false ) ;
const match
= textInput . current
? textInput . current . value === root
: false ;
active && trigger ? setActive ( false ) : null ;
useEffect ( ( ) => {
if ( active && match ) {
setTimeout ( ( ) => {
setActive ( false ) ;
} , 2000 ) ;
}
} , [ ] ) ;
return (
< ClickAwayListener
onClickAway = { handleClickAway }
>
< >
< Backdrop
open = { active }
onClick = { handleBackDrop }
/ >
< Fab
size = "small"
color = "primary"
aria-label = "search"
onClick = { handleSearchButton }
variant = { active ? 'extended' : 'round' }
style = { active ? {
backgroundColor :
loading
? theme . palette . warning . main
: ! meta
? theme . palette . error . main
: meta && match
? theme . palette . success . main
: theme . palette . primary . main ,
} : null }
>
< Input
label = { label }
placeHolder = { placeHolder }
helperText = { helperText }
active = { active }
match = { match }
meta = { meta }
loading = { loading }
textInput = { textInput }
onKeyPress = { onKeyPress }
onChange = { onChange }
/ >
< / Fab >
< / >
< / ClickAwayListener >
) ;
} ;
يريد المستخدم رؤية سجل البحث
useHistory هو خطاف سياق للوصول إلى القيم المخزنة في HistoryProvider .useReducer لـ HistoryProver بتجميع الكلمات التي تم الاستعلام عنها حسب التعريفات التي تتشاركها.Selectionيريد المستخدم رؤية الكلمة المستخدمة في الجملة
Display :Sense لتمرير خاصية sampleString و optionWord ، والذي يقوم بتنشيط Intersection Observer وأحداث الماوس لتغيير خاصية optionWord ديناميكيًا.{it} {/it} و {lquo} {rquo} . نظرًا لأنها علامات مفتوحة ومغلقة، فإن وظائف استبدال regex تثبت موثوقيتها في تنظيف سلسلة المثال باستمرار عندما يحدث تعريف لها. (انظر مثال الاستجابة من Theaurus API)يريد المستخدم رؤية علامة بجوار النتائج المتكررة (المعروفة أيضًا باسم الكلمات المحفوظة بالفعل)
useReducer في HistoryProvider :HistoryProvider بخصائص تسمح بالتحقق من خلال مقارنة هذه الخصائص بالكلمات الجديدة:Counters :HistorySaves حتى يتمكن المستخدم من عرض "التكرارات" المعروفة أيضًا باسم الكلمات المحفوظة للمستخدم من خلال تعريفات الخصائص التي يشاركونها. const [ savedWords , dispatch ] = useReducer ( ( state , action ) => {
switch ( action . type ) {
case 'add' :
const wordIndex = state . findIndex ( ( word ) => word . uuid === action . uuid
|| word . name === action . name
&& word . sense === action . sense ) ;
if ( wordIndex !== - 1 ) {
return state . map ( ( word , i ) => ( {
... word ,
value : word . value + ( wordIndex === i ? 1 : 0 ) ,
} ) ) ;
}
return [
... state ,
{
id : state . length ,
name : action . name ,
value : 1 ,
root : action . root ,
label : action . label ,
uuid : action . uuid ,
sense : action . sense ,
} ,
] ;
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;
case 'clear' :
return [ ] ;
default :
return state ;
}
} , [ ] ) ;
يريد المستخدم حذف سجل البحث المحفوظ
Clear :DeleteForever وهو عبارة عن وظيفة dispatch لـ useReducer من HistoryProvider والتي تحذف كل شيء من السياق.Delete التي يمثلها مكون Material-UI Chip . // clear.button.js
// excerpt
const wordsDispatch = useDispatchHistory ( ) ;
const handleClick = ( event ) => {
wordsDispatch ( {
type : 'clear' ,
} ) ;
} ;
// words.context.js
// excerpt from reducer
// the above handler calls case 'remove'
case 'remove' :
return state . filter ( ( word ) => word . id !== action . id ) ;عرض أحدث النتائج
يتم استخدام Lighthouse via Vercel لاختبار الأداء، مما ينتج عنه نتائج فريدة في كل git push . يتم استخدام شارات المنارة لإنشاء شارات جديدة لكل عملية نشر عن طريق تثبيت npm i -g lighthouse-badges ودفع عنوان URL المجزأ الجديد إلى مجموعة عناوين url:
lighthouse-badges
-o docs/badges -r
-u https://synonyms.vercel.app/ [... all other urls]
# Output to docs/badges
# Badges will contain the respective
average score(s) of all the urls
supplied, combined
تعمل مقاييس Lighthouse، وتحديدًا إمكانية الوصول والأداء، على إنشاء علامات محددة في كل عملية تدقيق. يتم إجراء التعديلات على كل دفعة لمعالجة أية مشكلات على وجه التحديد.
role . العودة إلى الأعلى
create-next-app ونشره باستخدام Vercel، وهو ما حققته بالخطوات التالية:commit بالرمز push من IDE المحلي الخاص بي إلى Github عبر Git ومحطة iTerm الخاصة بجهاز MacBook Pro.select الموجود في الجزء العلوي الأيسر من الموجه الفوري."لقد تم نشر مشروعك بنجاح."
العودة إلى الأعلى
git clone https://github.com/israelias/synonym-chasercd لاسم هذا الريبو: cd synonym-chasernpm install npm run dev
# or
yarn dev افتح متصفحك على المضيف المحلي:3000
info موجود عبر قاموس Merriam-Webster's Collegiate Thesaurus.العودة إلى الأعلى
