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.

✔️ Синтаксис

:target {
css declarations;
}

CodeBase | Frontend | #css

Please open Telegram to view this post

VIEW IN TELEGRAM

1.2K views05:02

CodeBase | Frontend

This media is not supported in your browser

VIEW IN TELEGRAM

Анимированный куб "SVG Starry cube"

Технологии: CSS и SVG

🔗

Ссылка

CodeBase | Frontend | #animated

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:09

CodeBase | Frontend

⚡️

Сниппет JS: Шифр Цезаря

⚡️

🔵 Это простой метод шифрования текста, при котором каждый символ заменяется другим символом, сдвинутым на фиксированное количество позиций вправо или влево по алфавиту.

🔵 Например, при сдвиге на 1 символ А становится Б, Б становится В и так далее.

const caesarCipher = (str, num) => {
  const arr = [...'abcdefghijklmnopqrstuvwxyz']
  let newStr = ''

  for (const char of str) {
    const lower = char.toLowerCase()

    if (!arr.includes(lower)) {
      newStr += char
      continue
    }

    let index = arr.indexOf(lower) + (num % 26)

    if (index > 25) index -= 26
    if (index < 0) index += 26

    newStr +=
      char === char.toUpperCase() ? arr[index].toUpperCase() : arr[index]
  }
  return newStr
}

caesarCipher('Hello World', 100) // Dahhk Sknhz
caesarCipher('Dahhk Sknhz', -100) // Hello World

CodeBase | Frontend | #snippets

Please open Telegram to view this post

VIEW IN TELEGRAM

1.0K views05:02

CodeBase | Frontend

⚡️

Промисы + async/await

⚡️

🟢 В JavaScript можно отложить выполнение определенных участков кода на неопределенное время, например, с помощью функции setTimeout(), прослушивателя событий или сетевых запросов с использованием fetch API.

🟢 Промисы представляют собой способ делать асинхронный код в JavaScript предсказуемым. Они позволяют разрешать код, созданный при помощи async. Успешное выполнение кода обрабатывается через метод .then(), а ошибки - через метод .catch().

🟢 Async/await представляет собой улучшенный синтаксис для работы с промисами, который позволяет делать асинхронный код выглядеть как синхронный.

// Асинхронный код; 'done' журналирован после данных о положении, несмотря на то что 'done' предполагается
    // исполнить в коде позже
    navigator.geolocation.getCurrentPosition(position => {
      console.log(position);
    }, error => {
      console.error(error);
    });
    console.log("done");

    // Асинхронный код обработан после промиса; мы получаем желаемый результат — данные о положении
    // журналированы, затем журналировано 'done'
    const promise = new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
    });

    promise
      .then(position => console.log(position))
      .catch(error => console.error(error))
      .finally(() => console.log('done'));

    // Асинхронный код с async/await выглядит как синхронный, наиболее удобочитаемый способ 
    // работы с промисами
    async function getPosition() {
      // async/await работает только в функциях (пока)
        const result = await new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(resolve, reject);
      });
        const position = await result;
        console.log(position);
        console.log('done');
    }

    getPosition();

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

1.1K views05:09

CodeBase | Frontend

🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое.

➡️ Всего в репозитории 33 пункта, к каждому из которых есть множество статей и видеоматериалов.

➡️ Репозиторий составлен на русском языке.

🔗

Ссылка

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

1.3K views05:01

CodeBase | Frontend