CodeBase | Frontend

🟢 Расширение Quokka позволяет тестировать JavaScript-код, не переключаясь на консоль браузера.

🟢 Кроме того, Quokka помогает в прототипировании и работе с файлами.

🟢 В нем есть встроенные отчеты и функции форматирования вывода.

🔗

Ссылка

CodeBase | Frontend | #plugins

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:04

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:03

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K viewsedited 05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views09:01

CodeBase | Frontend

👩‍💻

Расширение VS Code: Bookmarks

Bookmarks поможет вам ориентироваться в коде, легко и быстро перемещаясь между важными позициями. Также поддерживается набор команд выделения, позволяющий выделять строки с закладками и области между строками с закладками.

➡️

Ссылка на плагин

CodeBase | Frontend | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K views05:02

CodeBase | Frontend

⚡️

Memos - это открытый сервис для создания заметок, который обеспечивает конфиденциальность.

🔵 Реализован с использованием технологий React и Go, позволяя удобно записывать свои мысли.

😀

Для быстрого запуска с помощью Docker:

docker run -d \
  --init \
  --name memos \
  --publish 5230:5230 \
  --volume ~/.memos/:/var/opt/memos \
  neosmemo/memos:stable

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K views05:02

CodeBase | Frontend

⚡️

AFISHA

⚡️

🔵

Сложность: Легкая

🔵

Страницы: Одностраничный

🔵

Язык: русский

🔗

Ссылка на макет

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K views05:02

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:06

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:01

CodeBase | Frontend

⚡️

Как отобразить сообщение, если JavaScript отключен?

⚡️

🟢 Большинство веб-страниц используют JavaScript, но при его отключении сайт может стать недоступным.

🟢 Некоторые пользователи отключают JavaScript ради безопасности, поэтому важно, чтобы ваша страница работала без него. Проверки должны выполняться на стороне клиента и сервера.

🟢 Если контент не работает без JavaScript, нужно показывать сообщение об ошибке.

1️⃣ Использование HTML тега <noscript>

🔵 Тег <noscript> отображает альтернативный контент в браузерах без поддержки скриптов или с отключенным JavaScript.

➡️ Пример:

<noscript>
Видео не может проигрываться, так как JavaScript отключен.
</noscript>

➡️ Полный пример:

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <h1>Пример тега noscript</h1>
    <noscript>
      <h2>JavaScript отключен в вашем веб-браузере. Некоторые функции не будут работать.</h2>
      <style type="text/css">
        #main-content { display: none; }
      </style>
    </noscript>
    <div id="main-content">
      <h2>JavaScript включен!</h2>
    </div>
  </body>
</html>

2️⃣ Использование метода meta refresh

🟣 Для отображения контента при отключенном JavaScript можно перенаправить пользователя на страницу с сообщением об этом. Метод meta refresh использует тег <meta> с атрибутом http-equiv="refresh" и атрибутом content, указывающим интервал времени до перенаправления.

➡️ Установив интервал в 0, можно мгновенно перенаправить пользователя:

<noscript>
  <meta http-equiv="refresh" content="0;URL=ShowErrorPage.html">
</noscript>

🟣 Если JavaScript отключен, браузер перенаправит пользователя на "ShowErrorPage.html" с предупреждающим сообщением.

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

⚡️

ESLintESLint

⚡️

➡️ ESLint обеспечивает проверку кода на наличие синтаксических ошибок и предлагает варианты исправлений.

➡️ Хотя в VS Code есть встроенная система IntelliSense для отображения подсказок, ESLint становится более удобным выбором, особенно если требуются различные настройки для JSX, обычного JavaScript или среды Node.js.

➡️ Линтер также может интегрироваться в систему проверки кода, позволяя убедиться в правильности кода перед отправкой файлов в репозиторий.

🔗

Документация

CodeBase | Frontend | #plugin

Please open Telegram to view this post

VIEW IN TELEGRAM

980 views05:39

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:02

CodeBase | Frontend

🐶 The Odin Project

The Odin Project - это бесплатный онлайн-курс, который поможет вам освоить все основные навыки веб-разработки, начиная с HTML и CSS, и заканчивая созданием полноценных веб-приложений.

➡️ Ссылка на проект

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K viewsedited 09:25

CodeBase | Frontend

⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

CodeBase | Frontend

1.2K views05:05

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:04

CodeBase | Frontend

⚡️

Псевдокласс :target

⚡️

🔵 Применяет стиль к целевому элементу в документе.

🔵 Он представляет целевой элемент с помощью id в соответствии с фрагментом URL.

✔️ Синтаксис