CodeBase | Frontend

⚡️

QUOKKA

⚡️

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

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

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

🔗

Ссылка

CodeBase | Frontend | #plugins

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5🔥3❤1

1.31K views05:04

CodeBase | Frontend

🖼️

React: Базовые крючки

🖼️

const [state, setState] = useState(initialState);

➡️ Использование функции useState позволяет создать переменную state и функцию setState для управления ее значением.

Во время инициализации, state равно переданному значению initialState.

setState(newState);

➡️ Функция setState применяется для изменения значения состояния. При вызове функции с новым значением, React добавляет в очередь повторную отрисовку компонента.

При последующих обновлениях, значение state, полученное с помощью useState, отображает текущее состояние после всех обновлений.

Функциональные обновления

➡️ Если новое состояние зависит от предыдущего, можно передать функцию в setState, которая принимает предыдущее значение и возвращает новое. В примере с компонентом счетчика используются обе формы setState.

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
    </>
  );
}

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥8❤‍🔥3👍1

1.1K views05:02

CodeBase | Frontend

⚡️

fullPage.js — это JavaScript-библиотека, которая используется для создания полноэкранных прокручивающихся веб-страниц.

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

➡️

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

1️⃣

Полноэкранная прокрутка: Контент отображается по одному слайду на экран.

2️⃣

Навигация: Встроенная навигация по точкам или стрелкам, которая позволяет быстро переходить к нужному слайду.

3️⃣

Мульти-секционные страницы: Возможность создания множества секций и слайдов внутри них.

4️⃣

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

5️⃣

Адаптивность: Поддержка мобильных устройств и возможность адаптировать внешний вид под разные размеры экранов.

6️⃣

Совместимость: Работа с большинством современных браузеров.

➡️

Пример использования fullPage.js может выглядеть так:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
    <style>
        .section {
            text-align: center;
            font-size: 3em;
            color: #fff;
        }
        #section1 { background-color: #1BBC9B; }
        #section2 { background-color: #4BBFC3; }
        #section3 { background-color: #7BAABE; }
        #section4 { background-color: #f90; }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" id="section1">Section 1</div>
        <div class="section" id="section2">Section 2</div>
        <div class="section" id="section3">Section 3</div>
        <div class="section" id="section4">Section 4</div>
    </div>

    <script>
        new fullpage('#fullpage', {
            // Опции конфигурации
            autoScrolling: true,
            navigation: true,
            navigationPosition: 'right',
        });
    </script>
</body>
</html>

🟡 Этот пример создаст веб-страницу с четырьмя полноэкранными секциями, которые можно прокручивать.

🟡 Библиотека fullPage.js широко используется для создания эффектных и интерактивных одностраничных веб-сайтов.

CodeBase | Frontend | #js_lib

Please open Telegram to view this post

VIEW IN TELEGRAM

❤‍🔥8👍3🔥3❤1🖕1

1.25K views05:03

CodeBase | Frontend

⚡️

Howler.js — это JavaScript-библиотека для работы с аудио в веб-приложениях. Она обеспечивает удобный API для воспроизведения звуков, что позволяет разработчикам легко добавлять аудиоэффекты и музыкальные фоны на свои веб-страницы.

🟣 Howler.js поддерживает все современные форматы аудио и предоставляет дополнительные возможности для управления звуками.

➡️

Основные возможности:

1️⃣

Кроссбраузерная поддержка: Работает в большинстве современных браузеров, обеспечивая совместимость с различными аудиоформатами (MP3, OGG, WAV, AAC и другими).

2️⃣

Управление звуками: Воспроизведение, пауза, остановка, изменение громкости, регулировка скорости воспроизведения.

3️⃣

Поддержка спрайтов: Возможность создания аудиоспрайтов, что позволяет хранить несколько звуков в одном файле и воспроизводить их по частям.

4️⃣

Буферизация: Автоматическая загрузка и кэширование аудиофайлов для плавного воспроизведения.

5️⃣

События: Поддержка событий, таких как начало воспроизведения, завершение, пауза и другие.

6️⃣

Простая интеграция: Легкий API, который позволяет быстро интегрировать аудио в веб-приложения.

➡️

Пример использования:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>
</head>
<body>
    <button onclick="playSound()">Play Sound</button>
    <button onclick="pauseSound()">Pause Sound</button>
    <button onclick="stopSound()">Stop Sound</button>

    <script>
        // Создание объекта Howl для управления звуком
        var sound = new Howl({
            src: ['path/to/sound.mp3', 'path/to/sound.ogg'],
            volume: 0.5,
            onplay: function() {
                console.log('Sound is playing');
            },
            onend: function() {
                console.log('Sound has ended');
            }
        });

        // Функции управления звуком
        function playSound() {
            sound.play();
        }

        function pauseSound() {
            sound.pause();
        }

        function stopSound() {
            sound.stop();
        }
    </script>
</body>
</html>

🟣 Этот пример демонстрирует, как создать аудиообъект с помощью howler.js и управлять воспроизведением звука через кнопки.

🟣 Howler.js является мощным инструментом для добавления аудио в веб-приложения, предлагая множество функций для гибкого и удобного управления звуками.

CodeBase | Frontend | #js

Please open Telegram to view this post

VIEW IN TELEGRAM

👍5❤2🔥1

1.32K viewsedited 05:02

CodeBase | Frontend

⚡️

Tamagui - это программное обеспечение с текстовым графическим пользовательским интерфейсом (TUI) для управления устройствами через командную строку, облегчая взаимодействие пользователя с техническими устройствами.

➡️

Для установки используйте:

npm install tamagui @tamagui/config

➡️

Включает в себя три компонента:

🟢

@tamagui/core — является библиотекой стилей, расширяющей API стилей React Native с множеством функций из CSS без внешних зависимостей, кроме React.

🟢

@tamagui/static — компилятор, который оптимизирует производительность.

🟢

@tamagui — обширный универсальный набор компонентов.

🖥 GitHub
💩 Доки

CodeBase | Frontend | #react

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥5

1.12K views05:02

CodeBase | Frontend

⚡️

Pixi.js — это мощная библиотека для рендеринга 2D-графики в браузере.

🔵 Она позволяет разработчикам создавать сложные и производительные анимации и интерактивные приложения с использованием HTML5 и WebGL.

🔵 Pixi.js поддерживает как WebGL, так и Canvas, что позволяет ей работать на разных устройствах и браузерах, обеспечивая высокую производительность.

➡️

Основные особенности Pixi.js:

1️⃣

Высокая производительность: Использование WebGL для рендеринга обеспечивает быстрое и плавное отображение графики.

2️⃣

Кросс-браузерная поддержка: Поддерживает различные браузеры и устройства, автоматически переключаясь на Canvas, если WebGL недоступен.

3️⃣

Легкость использования: Предоставляет удобный и понятный API для работы с графикой и анимацией.

4️⃣

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

5️⃣

Расширяемость: Имеет множество плагинов и дополнений, которые расширяют функционал библиотеки.

➡️

Пример простого использования Pixi.js:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pixi.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/6.5.8/pixi.min.js"></script>
</head>
<body>
  <script>
    // Создаем приложение Pixi
    let app = new PIXI.Application({
      width: 800, 
      height: 600,                       
      backgroundColor: 0x1099bb
    });
    document.body.appendChild(app.view);

    // Загружаем изображение и создаем спрайт
    PIXI.Loader.shared.add('example.png').load((loader, resources) => {
      let sprite = new PIXI.Sprite(resources['example.png'].texture);

      // Центрируем спрайт
      sprite.x = app.view.width / 2;
      sprite.y = app.view.height / 2;
      sprite.anchor.set(0.5);

      // Добавляем спрайт в сцену
      app.stage.addChild(sprite);
    });
  </script>
</body>
</html>

👀 В этом примере создается простое приложение Pixi.js, которое загружает изображение example.png и отображает его в центре экрана.

CodeBase | Frontend | #js_lib

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥6👍2❤‍🔥1❤1

1.11K views05:02

CodeBase | Frontend

⚡️

useLayoutEffect — это хук в React, который позволяет выполнять побочные эффекты синхронно после того, как все изменения DOM были внесены, но до того, как браузер обновит экран.

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

▶️

Сравнение с

 useEffect

Основное различие между useEffect и useLayoutEffect заключается во времени их выполнения:

🔘

useEffect выполняется асинхронно после рендеринга и после того, как браузер обновил экран.

🔘

useLayoutEffect выполняется синхронно сразу после всех изменений в DOM, но до того, как браузер нарисует экран.

▶️

Когда использовать

 useLayoutEffect

Использование useLayoutEffect целесообразно в случаях, когда нужно:

🔘 Измерить размеры или позицию DOM-элементов до того, как браузер отрисует изменения.
🔘 Выполнить какие-либо операции, которые могут повлиять на верстку или стиль, и эти изменения должны быть учтены до отображения на экране.

▶️

Пример использования

 useLayoutEffect

Рассмотрим пример, где мы хотим измерить ширину элемента div сразу после его рендеринга и отобразить эту ширину в элементе:

import React, { useLayoutEffect, useRef, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    if (divRef.current) {
      setWidth(divRef.current.offsetWidth);
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '50%' }}>
        Resize the window to change my width
      </div>
      <p>Div width: {width}px</p>
    </div>
  );
}

export default MeasureDiv;

⚠️

В этом примере:

🔘 Мы используем useRef для получения ссылки на элемент div.
🔘 С помощью useLayoutEffect мы измеряем ширину элемента после его рендеринга, но до того, как браузер обновит экран.
🔘 Ширина сохраняется в состоянии с помощью useState и отображается в абзаце.

Этот подход гарантирует, что ширина элемента будет измерена до того, как пользователь увидит изменения на экране, что может быть критично для некоторых приложений, например, для анимаций или точных расчётов верстки.

▶️

Важные моменты

🔘 Поскольку useLayoutEffect блокирует обновление экрана до завершения эффекта, использование его для длительных операций может привести к задержкам и ухудшению производительности.

🔘 Поэтому рекомендуется использовать useLayoutEffect только тогда, когда это действительно необходимо, а для всех остальных побочных эффектов использовать

 useEffect.

CodeBase | Frontend | #react_hook

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥5❤1

1.06K views09:01

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

About

Blog

Apps

Platform