1 Тема від rom_php

  • rom_php
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 22.04.2024
  • Повідомлень: 4
    • Репутація: 5

Тема: Вивчення англійської echoword

Добрий день. Прошу оцінити мій пет проект для вивчення англійських слів https://echoword.net/
Цікавить все, від технічних моментів до дизайну і доцільності взагалі. Буду радий будь яким відгукам.

Подякували: leofun01, mikeos, flatliner3

2 Відповідь від comport Востаннє редагувалося comport (22.04.2024 07:29:39)

  • comport
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 09.04.2019
  • Повідомлень: 703
    • Репутація: 117

Re: Вивчення англійської echoword

Як вчать рідну мову діти? От приблизно так потрібно вивчати мови. Тобто бажано фрази цілком. в контексті. Тобто фільми і подібне. Бажано з субтитрами.

І бажано, щоб сайт працював і без реєстрації також. Щоб спробувати - що там.

Подякували: flatliner1

3 Відповідь від rom_php

  • rom_php
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 22.04.2024
  • Повідомлень: 4
    • Репутація: 5

Re: Вивчення англійської echoword

Дякую за відгук. Так ви праві, без контексту вчити слова тяжко, тому в кожного слова по задуму є приклад (на даний момент сайт не заповнений повністю), можливо варто робити картки взагалі тільки з фраз.
спробувати без реєстрації можна https://echoword.net/explore-groups при виборі групи (натиснути на імя)

4 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 052
    • Репутація: 2614

Re: Вивчення англійської echoword

В минулому я часто рекомендував власникам сайтів користувати валідатор. Але вони (w3.org) повісили скріптований захист від користувача і тримають його там вже тривалий час, тому станом на зараз навіть не маю що додати.
Крім того цей форум містить майже ті самі помилки шо у вас, тому будь-які поради тут (стосовно сайтобудуваня) виглядають [як мінімум] дивно.

▼Якщо після всього висче зказаного вам ще цікаві технічні поради, то вони тут

  • Замість href="https://echoword.net/..." має бути href="/..." або href="...".

  • Замість src="https://echoword.net/..." має бути src="/..." або src="...". Імя основного домена не має бути всюди.

  • Замість a href="#" має бути a href="#target" або будь-що змістовне. При цьому кожний #target має бути присутній в документі, на який веде посиланя.

  • Віддавати <app-component ...></app-component> до клієнта і очікувати що клієнт проведе заміну скріптами не допустимо. Варто виконати "відрисовку на сервері" ("server side rendering"), як це називають розробники бібліотеки. До реальної відрисовки ("graphics rendering") цей процес взагалі не має відношеня, просто розробники бібліотеки вибрали таку назву для виконаня на сервері того, що за замовчуваням мало бути там виконано.

  • І не можна ставити пробіли між імям і значеням атрибута. Це <a href = "mailto: echowordnet@gmail.com"> треба замінити на щось таке <a href="mailto:echowordnet@gmail.com">

leofun01 вебсайт

5 Відповідь від frz

  • frz
  • frz
  • Data / DB Engineer
  • Поза форумом
  • Звідки: PL
  • Дата реєстрації: 28.12.2019
  • Повідомлень: 6 839

Re: Вивчення англійської echoword

leofun01 написав:

вони (w3.org) повісили скріптований захист від користувача

Напишіть заодно про свою особисту js фобію чи додайте лінк на описане раніше, бо не те що новачкам, а й деяким динозаврам форуму неочевидно що саме за цим ховається.

frz вебсайт

6 Відповідь від rom_php

  • rom_php
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 22.04.2024
  • Повідомлень: 4
    • Репутація: 5

Re: Вивчення англійської echoword

leofun01 написав:

В минулому я часто рекомендував власникам сайтів користувати валідатор. Але вони (w3.org) повісили скріптований захист від користувача і тримають його там вже тривалий час, тому станом на зараз навіть не маю що додати.
Крім того цей форум містить майже ті самі помилки шо у вас, тому будь-які поради тут (стосовно сайтобудуваня) виглядають [як мінімум] дивно.

▼Якщо після всього висче зказаного вам ще цікаві технічні поради, то вони тут

  • Замість href="https://echoword.net/..." має бути href="/..." або href="...".

  • Замість src="https://echoword.net/..." має бути src="/..." або src="...". Імя основного домена не має бути всюди.

  • Замість a href="#" має бути a href="#target" або будь-що змістовне. При цьому кожний #target має бути присутній в документі, на який веде посиланя.

  • Віддавати <app-component ...></app-component> до клієнта і очікувати що клієнт проведе заміну скріптами не допустимо. Варто виконати "відрисовку на сервері" ("server side rendering"), як це називають розробники бібліотеки. До реальної відрисовки ("graphics rendering") цей процес взагалі не має відношеня, просто розробники бібліотеки вибрали таку назву для виконаня на сервері того, що за замовчуваням мало бути там виконано.

  • І не можна ставити пробіли між імям і значеням атрибута. Це <a href = "mailto: echowordnet@gmail.com"> треба замінити на щось таке <a href="mailto:echowordnet@gmail.com">

Дякую за відгук. переглянув всі пункти, але не впевнений що все зрозумів. використавши валідатор виявив тільки інформативні помилки по зворотному слешу в тегах.
По вашому списку:
1, 2 лінки генерує функціонал фреймворку (laravel). я намагаюсь не вносити зміни в сам фреймворк.
3. тут ви праві, +.
4. тут я не розумію в чому конкретно проблема. сайт в цілому не працює без підтримки js, клієнт завантажує тільки свої данні, або глобальні "перевірені" данні з бд.
5. +

Подякували: flatliner1

7 Відповідь від frz

  • frz
  • frz
  • Data / DB Engineer
  • Поза форумом
  • Звідки: PL
  • Дата реєстрації: 28.12.2019
  • Повідомлень: 6 839

Re: Вивчення англійської echoword

rom_php написав:

4. тут я не розумію в чому конкретно проблема. сайт в цілому не працює без підтримки js, клієнт завантажує тільки свої данні, або глобальні "перевірені" данні з бд.

Це "особиста js фобія" leofun01.

frz вебсайт

8 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 052
    • Репутація: 2614

Re: Вивчення англійської echoword

frz написав:

Це "особиста js фобія" leofun01.

В межах цього топіка все ще простіше. Якщо web переглядач виконує валідацію HTTP-відповіді, то до виконаня js він навіть не дійде.

rom_php написав:

1, 2 лінки генерує функціонал фреймворку (laravel). я намагаюсь не вносити зміни в сам фреймворк.

Не факт шо імям домена бризкає Laravel (PHP). Такий ефект також може бути наслідком налаштувань cPanel, Apache, або NginX.

rom_php написав:

4. тут я не розумію в чому конкретно проблема. сайт в цілому не працює без підтримки js, клієнт завантажує тільки свої данні, або глобальні "перевірені" данні з бд.

▼js хай собі буде, але HTML-сторінка має бути як мінімум валідною

Відкрийте вашу сторінку-джерело (HTTP-відповідь) :

view-source:https://echoword.net/repeat

Там ви знайдете фраґмент :

<app-component :user="{&quot;id&quot;:75,&quot;name&quot;:&quot;test&quot;,&quot;email&quot;:&quot;test@test.org&quot;,&quot;email_verified_at&quot;:null,&quot;created_at&quot;:&quot;2024-04-22T04:48:25.000000Z&quot;,&quot;updated_at&quot;:&quot;2024-04-22T04:48:25.000000Z&quot;,&quot;gauth_id&quot;:null,&quot;role&quot;:null}"></app-component>

Далі, відкрийте спиок tag'ів (w3schools.com або mozilla.org), там ви не знайдете <app-component>, бо такий tag не існує в специфікації HTML. Тобто сервер віддає клієнту не валідну сторінку (документ, який містить не відомий tag), через що користувачі (як мінімум частина з них) не зможуть взаємодіяти зі сторінкою (навіть з увімкненим js).

Як це виправити:
Застосувати "server side rendering" (на стороні сервера) і віддавати клієнтам готовий (валідний) HTML-документ.
Як саме це робити - шукайте в документації фреймворка (Angular, Next.js, чи шо ви там користуєте).

leofun01 вебсайт

9 Відповідь від rom_php

  • rom_php
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 22.04.2024
  • Повідомлень: 4
    • Репутація: 5

Re: Вивчення англійської echoword

leofun01 написав:
frz написав:

Це "особиста js фобія" leofun01.

В межах цього топіка все ще простіше. Якщо web переглядач виконує валідацію HTTP-відповіді, то до виконаня js він навіть не дійде.

rom_php написав:

1, 2 лінки генерує функціонал фреймворку (laravel). я намагаюсь не вносити зміни в сам фреймворк.

Не факт шо імям домена бризкає Laravel (PHP). Такий ефект також може бути наслідком налаштувань cPanel, Apache, або NginX.

rom_php написав:

4. тут я не розумію в чому конкретно проблема. сайт в цілому не працює без підтримки js, клієнт завантажує тільки свої данні, або глобальні "перевірені" данні з бд.

▼js хай собі буде, але HTML-сторінка має бути як мінімум валідною

Відкрийте вашу сторінку-джерело (HTTP-відповідь) :

view-source:https://echoword.net/repeat

Там ви знайдете фраґмент :

<app-component :user="{&quot;id&quot;:75,&quot;name&quot;:&quot;test&quot;,&quot;email&quot;:&quot;test@test.org&quot;,&quot;email_verified_at&quot;:null,&quot;created_at&quot;:&quot;2024-04-22T04:48:25.000000Z&quot;,&quot;updated_at&quot;:&quot;2024-04-22T04:48:25.000000Z&quot;,&quot;gauth_id&quot;:null,&quot;role&quot;:null}"></app-component>

Далі, відкрийте спиок tag'ів (w3schools.com або mozilla.org), там ви не знайдете <app-component>, бо такий tag не існує в специфікації HTML. Тобто сервер віддає клієнту не валідну сторінку (документ, який містить не відомий tag), через що користувачі (як мінімум частина з них) не зможуть взаємодіяти зі сторінкою (навіть з увімкненим js).

Як це виправити:
Застосувати "server side rendering" (на стороні сервера) і віддавати клієнтам готовий (валідний) HTML-документ.
Як саме це робити - шукайте в документації фреймворка (Angular, Next.js, чи шо ви там користуєте).

нажаль моя спеціальність це не фронтенд) але як я розумію <app-component> це кастомний компонент для vue.js. і якщо у клієнта працює js, vue його уже скомпілює з іншими компонентами і видасть валідний html. В кінцевому результаті у клієнта <app-component> не буде.

Подякували: leofun011

10 Відповідь від mikeos Востаннє редагувалося mikeos (23.04.2024 15:20:29)

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 162
    • Репутація: 93

Re: Вивчення англійської echoword

leofun01 написав:

Віддавати <app-component ...></app-component> до клієнта і очікувати що клієнт проведе заміну скріптами не допустимо.

Вже давно є така штука як Web Components - https://developer.mozilla.org/uk/docs/W … m_elements

І validator.w3.org каже шо html валідний. No errors or warnings to show.

Подякували: leofun011

mikeos вебсайт

11 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 052
    • Репутація: 2614

Re: Вивчення англійської echoword

mikeos написав:

Вже давно є така штука як Web Components - https://developer.mozilla.org/uk/docs/W … m_elements

Не релевантно. Web компоненти є наслідком роботи скріптів і доступності API конкретного web переглядача. Від того, що сервер буде віддавати не валідні tag'и, в клієнта "web компонент" не появиться в DOM.

mikeos написав:

І validator.w3.org каже шо html валідний. No errors or warnings to show.

Вітаю в світі, який змінюється. Так, станом на зараз [як мінімум] головна сторінка валідна відповідно до HTML 5, це добре, значить пофіксили.

leofun01 вебсайт

12 Відповідь від mikeos Востаннє редагувалося mikeos (23.04.2024 18:40:34)

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 162
    • Репутація: 93

Re: Вивчення англійської echoword

leofun01 написав:

Не релевантно. Web компоненти є наслідком роботи скріптів і доступності API конкретного web переглядача. Від того, що сервер буде віддавати не валідні tag'и, в клієнта "web компонент" не появиться в DOM.

А чому це вони не валідні? Де є визначення "валідних тегів"?
По тому посиланні яке ти кидав вище (https://developer.mozilla.org/uk/docs/Web/HTML/Element):

Web Components is an HTML-related technology that makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

leofun01 написав:

Вітаю в світі, який змінюється. Так, станом на зараз [як мінімум] головна сторінка валідна відповідно до HTML 5, це добре, значить пофіксили.

Там досі є тег <app-component> і валідатор каже шо все ок

Подякували: leofun011

mikeos вебсайт

13 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 052
    • Репутація: 2614

Re: Вивчення англійської echoword

▼Вже не актуально
mikeos написав:

А чому це вони не валідні?

Бо в стандарті їх не є.
(upd: виявилось, це тепер не зовсім так, тому кладу під spoiler)

mikeos написав:

По тому посиланні яке ти кидав вище (https://developer.mozilla.org/uk/docs/Web/HTML/Element):

Ще з року 2018 (чи якого) ходять легенди про наміри консорціуму дозволити кустомні таґи, але станом на зараз чорновик залишається чорновиком, а це не прийнятий стандарт, ймовірно колись він стане стандартом, але поки не є.
Коли розробники web-переглядачів роблять свої продукти з оглядкою на чорновики, я розумію для чого вони це роблять, для них важливо мати готовий продукт на момент коли чорновик стане стандартом. Але коли будівельники сайтів покладаються на чорновики, цього я не розумію, бо чорновик зараз і чорновик завтра можуть бути відчутно різними, а для користувачів треба ґарантувати відповідність стандарту.

▼Щойно оновив мої знаня про HTML (+видиво, en)
w3.org/html/ написав:

https://html.spec.whatwg.org/multipage/ is the current HTML standard. It obsoletes all other previously-published HTML specifications.

Well, what a fuck is that ?

mikeos написав:

Там досі є тег <app-component>

Де ?, дайте номер стрічки, бо я не бачу. Якщо не знайдете, то певно [ваша] локальна версія була з кешу.

leofun01 вебсайт

14 Відповідь від mikeos

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 162
    • Репутація: 93

Re: Вивчення англійської echoword

leofun01 написав:

Де ?, дайте номер стрічки, бо я не бачу. Якщо не знайдете, то певно [ваша] локальна версія була з кешу.

Ну тепер на тій сторінці вже нема).

Але я заради цікавості створив html сторінку з двома кастомними тегами, без  js - https://html-test-e4v2.onrender.com/
Ось результат валідатора. Помилок немає.

Подякували: leofun011

mikeos вебсайт

15 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 052
    • Репутація: 2614

Re: Вивчення англійської echoword

mikeos, дякую, тобі вдалось переконати мене в тому, що [як мінімум] в деяких моментах я був не правий.

Стосовно web'у і понищених стандартів: Дуже шкода що консорціум погодився на таке; З власного досвіду знаю, чим менше строгості тим більше хаосу.

Подякували: mikeos1

leofun01 вебсайт

16 Відповідь від mikeos

  • mikeos
  • mikeos
  • Користувач
  • Поза форумом
  • Дата реєстрації: 14.02.2016
  • Повідомлень: 162
    • Репутація: 93

Re: Вивчення англійської echoword

leofun01 написав:

Стосовно web'у і понищених стандартів: Дуже шкода що консорціум погодився на таке; З власного досвіду знаю, чим менше строгості тим більше хаосу.

Ну не знаю, в кожного своя думка і свій досвід. Я наприклад розглядаю це як розширення можливостей для розробки. Не думаю шо кастомні елементи привносять якийсь хаос, це все залежить від розробника. А поняття строгості в html думаю трохи розпливчасте, а ще якшо в привязці з css то взагалі.

Навіть стандартні елементи чи атрибути можуть бути по різному реалізовані в різних браузерах. Але все рівно мені здається, що тепер сучасні браузери більше дотримуються нових стандартів ніж раніше, в часи коли найбільшим болем було "підганяти сайт" для різних браузерів (особливо internet explorer і safari)

Я завжди дивлюсь на https://developer.mozilla.org/uk/docs, якщо нема відмітки шо це Experimental і по табличці Browser сompatibility все підходить то значить можна пробувати )

Подякували: leofun011

mikeos вебсайт

17 Відповідь від flatliner

  • flatliner
  • flatliner
  • Replace Group
  • Поза форумом
  • Звідки: Україна, Полтава
  • Дата реєстрації: 19.09.2016
  • Повідомлень: 915
    • Репутація: 666

Re: Вивчення англійської echoword

Чи актуально? - Так, це дуже актуальна річ, завжди. Особливо, якщо зроблено все на найвищому рівні, тоді всі будуть користуватися саме цим проектом, адже в будь-якому інтегрованому проекти з вивчення мови, я свій модуль для вивчення слів.

Що не так? - Перше, найголовніше. В мене у Firefox чомусь не запросило дозволу до мікрофону, як це зазвичай буває з додатками, що працюють з мікрофоном. І ні відтворення слів, ні практикування вимови в мене не спрацювало чомусь.
Хтось сказав, що варто дати можливість спробувати без реєстрації - це плюс, бо якби не було реєстрації через github, я би полінився.
Можна ще додати реєстрацію через Facebook (інші мережі, якщо знаєте популярні).

Як покращити? - Я би за можливістю додав би до карток зі словами малюнки.
Щодо контексту. Це так, слова краще вчити у контексті, однак, я би не змішував, а зробив би це окремим модулем. Ви читаєте текст, бачите незнайоме слово, клікаєте - додаєте його до словника. Потім проглядаєте словник, опрацьовуєте слова. Далі знову читаєте текст, в якому опрацьовані слова з'являються час від часу (якщо ви по ним не клікнули - ступінь вивченості підвищується, частота появи - знижується), а також нові слова. Але, розумію, що підбирати тексти, щоб їх ще було цікаво читати, це ще та задача...

В цілому оцінка проекту - гарна річ, продовжуйте, розвивайте. Бажаю успіху.