CodeBase | Frontend
@codebase_frontend
2.13K subscribers
362 photos
129 videos
2 files
524 links
Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)
Download Telegram
About
Blog
Apps
Platform
Join
CodeBase | Frontend
2.13K subscribers
CodeBase | Frontend
👩‍💻 Расширение VS Code: Bookmarks

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

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

CodeBase | Frontend | #плагин
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
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 views
CodeBase | Frontend
⚡️ AFISHA ⚡️

🔵 Сложность: Легкая
🔵 Страницы: Одностраничный
🔵 Язык: русский

🔗 Ссылка на макет
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
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 views
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 views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views
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  
CodeBase | Frontend
⚡️ React.js Cheatsheet – сборник готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

CodeBase | Frontend
1.2K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K views
CodeBase | Frontend
⚡️ Псевдокласс :target ⚡️

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

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

✔️ Синтаксис
:target {
css declarations;
}


CodeBase | Frontend | #css
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
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 views
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 views
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 views
CodeBase | Frontend
🗣 Каждый программист должен знать ключевые концепции JavaScript, такие как типы данных, примитивные типы, стек вызовов, методы map, reduce, filter и многое другое.

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

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

🔗 Ссылка

CodeBase | Frontend | #js
Please open Telegram to view this post
VIEW IN TELEGRAM
1.3K views
CodeBase | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Flexer - визуальный конфигуратор CSS Flexbox, который отлично подходит для начинающих для изучения и понимания работы flexbox.

🔗 Ссылка

CodeBase | Frontend | #resource
Please open Telegram to view this post
VIEW IN TELEGRAM
1.2K views
CodeBase | Frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
1.0K views
CodeBase | Frontend
This media is not supported in your browser
VIEW IN TELEGRAM
🗣Интерактивное описание планет Солнечной системы, созданное с использованием SCSS, а не JavaScript.

🔗 Ссылка

CodeBase | Frontend | #scss
Please open Telegram to view this post
VIEW IN TELEGRAM
991 views
CodeBase | Frontend
⚡️ Plasmic - это визуальный конструктор для React, который позволяет создавать приложения на React без необходимости писать код, используя готовые компоненты.

🔵 Кроме того, Plasmic является очень эффективным и подходит для разработки маркетинговых веб-сайтов и сайтов электронной коммерции с большим объемом трафика.

🐱 GitHub
🔵 Сайт

CodeBase | Frontend | #react
Please open Telegram to view this post
VIEW IN TELEGRAM
1.1K views