CodeBase | Frontend – Telegram

CodeBase | Frontend

@codebase_frontend

2.14K subscribers

381 photos

150 videos

5 files

569 links

Все самое интересное и полезное у нас 😎

Контакт: @Filgood777 (реклама, сотрудничество)

Download Telegram

About

Blog

Apps

Platform

CodeBase | Frontend

2.14K subscribers

CodeBase | Frontend

👩‍💻

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

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

➡️

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

CodeBase | Frontend | #плагин

Please open Telegram to view this post

VIEW IN TELEGRAM

❤8

1.17K 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

1.17K views05:02

CodeBase | Frontend

⚡️

AFISHA

⚡️

🔵

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

🔵

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

🔵

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

🔗

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

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥2

1.16K views05:02

CodeBase | Frontend

⚡️

Cleave.js - это JavaScript библиотека, которая применяется преимущественно для форматирования вводимого текста, обеспечивая плавную работу.

🔵 Она легка в использовании и проста в освоении.

🔗

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

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍4

1.09K views05:06

CodeBase | Frontend

⚡️

Dismantle.js — это библиотека для анализа и модификации исполняемого JavaScript-кода.

🟢 Она предоставляет инструменты для работы с абстрактными синтаксическими деревьями (AST), позволяя разработчикам исследовать и изменять структуру и поведение кода.

➡️

Основные возможности включают:

1️⃣

Разбор кода: Преобразование JavaScript-кода в синтаксическое дерево.

2️⃣

Анализ кода: Изучение элементов кода, таких как переменные, функции и выражения.

3️⃣

Манипуляция кодом: Изменение синтаксического дерева для рефакторинга или оптимизации.

4️⃣

Генерация кода: Преобразование измененного синтаксического дерева обратно в код.

👀 Эта библиотека полезна для создания инструментов разработки, таких как линтеры, форматеры и транспайлеры.

🔗

Установка

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥3

1.12K 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

👍10❤‍🔥1👎1

1.11K 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

👍6❤3

981 views05:39

CodeBase | Frontend

⚡️

Ключевое слово this

⚡️

В

JavaScript ссылается на контекст выполнения текущей функции или объекта. Его значение определяется тем, как была вызвана функция, а не тем, где она была объявлена.

➡️

Основные правила определения значения this:

1️⃣

Глобальный контекст (контекст выполнения скрипта): вне какой-либо функции this ссылается на глобальный объект (в браузерах это window, в Node.js — `global`).

console.log(this); // window (в браузере)

2️⃣

Внутри функции: если функция вызывается в глобальном контексте, this также будет ссылаться на глобальный объект.

function foo() {
       console.log(this); // window (в браузере)
   }
   foo();

3️⃣

Методы объекта: если функция вызвана как метод объекта, this ссылается на этот объект.

const obj = {
       method: function() {
           console.log(this); // obj
       }
   };
   obj.method();

4️⃣

Конструкторы: при вызове функции как конструктора с помощью new, this ссылается на новый экземпляр объекта.

function Person(name) {
       this.name = name;
   }
   const person = new Person('John');
   console.log(person.name); // John

5️⃣

call, apply и bind: методы call, apply и bind позволяют явно задать значение

 this.

 function greet() {
       console.log(this.name);
   }
   const person = { name: 'John' };
   greet.call(person); // John

6️⃣

Стрелочные функции: у стрелочных функций нет собственного this. Они захватывают значение this из окружающего контекста на момент своего определения.

const obj = {
       method: function() {
           const arrow = () => console.log(this);
           arrow(); // obj
       }
   };
   obj.method();

👀 Значение this может быть сложным для понимания, но понимание контекста вызова функции помогает предсказать, на что будет ссылаться

 this.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍11❤2🔥1

1.06K views05:02

CodeBase | Frontend

🐶 The Odin Project

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

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

CodeBase | Frontend

Please open Telegram to view this post

VIEW IN TELEGRAM

👍6❤1

1.21K viewsedited 09:25

CodeBase | Frontend

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

CodeBase | Frontend

1.17K views05:05

CodeBase | Frontend

⚡️

Задание: Создайте переключаемую боковую панель

⚡️

Периодически мы будем предлагать вам задания для выполнения и прокачки своих навыков.

➡️

Особенности:

🟢Возможность включения и отключения боковой панели

🟢Генерация пунктов меню из объекта JavaScript

➡️

Передовые функции:

🟢 Возможность перехода на различные страницы через взаимодействие с элементами

🟢 Сохранение выбранного состояния при наличии хэша в URL

➡️

В процессе вы узнаете:

🟢 Как проводить проверки

🟢 Манипуляции с классами

🟢 Динамическое отображение элементов

🟢 Использование API истории

🟢 Определение местоположения объекта

🔗

🔗

Учебник

Если хотите и дальше получать полезную инфу с крутыми проектами, добавь 🔥 🔥 🔥

CodeBase | Frontend | #task

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥4

1.34K views05:04

CodeBase | Frontend

⚡️

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

⚡️

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

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

✔️ Синтаксис

:target {
css declarations;
}

CodeBase | Frontend | #css

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3🔥2

1.17K 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

🔥6

1.06K 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

👍5🔥3

1.03K 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

👍5🔥2

1.12K views05:09

CodeBase | Frontend

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

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

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

🔗

Ссылка

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5

1.31K views05:01

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.19K views13:10

CodeBase | Frontend

⚡️

Вы знали, что свойство length массивов в JavaScript не только получает длину массива, но также может устанавливать её?

⚡️

🗣 При установке значения меньше текущей длины массива, элементы удаляются с конца массива, чтобы соответствовать новой длине.

🗣 Если значение больше текущей длины, то в конец массива добавляются пустые элементы.

🗣 Это часто применяется для полной очистки массива путем установки значения на 0.

Понравился пост? Добавь 🔥🔥🔥

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍8🔥5

1.01K views05:01

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

❤7👍1

994 views13:20

CodeBase | Frontend

⚡️

Plasmic - это визуальный конструктор для React, который позволяет создавать приложения на React без необходимости писать код, используя готовые компоненты.

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

🐱

GitHub

🔵

Сайт

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

👍3

1.12K views05:01

CodeBase | Frontend

⚡️

Подготовил для вас небольшую подборку годноты

⚡️

➡️ Анимация

🔵 Animate.css – библиотека CSS анимаций
🔵 Magic – кроссбраузерные анимации
🔵 Hover.css – набор анимаций CSS

➡️ Фоновая заставка

🔵 Coverr – Короткие видео для фона на сайт
🔵 Subte Patterns – Фоны для сайта

➡️ Шпаргалки

🔵 FlexBox – шпаргалка по Flexbox
🔵 CSS Cheat Sheet – шпаргалка по CSS
🔵 Emmet Cheat Sheet – шпаргалка по Emmet

Если вам нравится такой формат постов, добавь 🔥🔥🔥

CodeBase | Frontend | #cheat_sheets #bg

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥15❤1⚡1

1.39K views05:04