⚡️ Псевдокласс ::first-letter ⚡️

🔥 Этот псевдокласс позволяет стилизовать первую букву текстового элемента. Он часто используется для создания инициалов или других типографических эффектов.

➡️ Принятые свойства:

🔵 color — цвет первой буквы
🔵 background-color — цвет фона
🔵 font-family — шрифт первой буквы
🔵 font-size — размер шрифта
🔵 font-weight – насыщенность шрифта
🔵 line-height — высота строки
🔵 text-decoration — текстовое оформление (подчеркивание, зачеркивание)
🔵 text-transform — преобразование текста (в верхний регистр, в нижний регистр)
🔵 margin - внешние отступы
🔵 padding - внутренние отступы
🔵 border — граница первой буквы
🔵 float — выравнивание (например, слева, справа).
🔵 text-shadow — тень текста

CodeBase | Frontend

⚡️ Разница между cookie, sessionStorage и localStorage ⚡️

➡️ Эти технологии — cookie, sessionStorage и localStorage — позволяют хранить данные на стороне клиента в браузере. Однако у них есть различия в способе использования и хранения данных.

🟢 Cookie — небольшой фрагмент данных, который отправляется сервером в браузер и затем сохраняется там на определенный период времени, устанавливаемый сервером. Они используются для хранения пользовательских настроек, данных авторизации и другой информации о пользователях.

Пример:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

🟢 SessionStorage — это объект, который позволяет сохранить данные в браузере только на время сессии, т.е. пока вкладка браузера открыта. Данные хранятся в форме ключ-значение и могут использоваться для сохранения состояния приложения или другой информации, доступной только в рамках текущей сессии.

Пример:

sessionStorage.setItem('username', 'John');
console.log(sessionStorage.getItem('username')); // вывод "John"

🟢 LocalStorage — это объект, который позволяет хранить данные в браузере на неопределенный период времени, даже после закрытия браузера и перезагрузки компьютера. Данные также хранятся в форме ключ-значение и могут использоваться для хранения состояния приложения или другой информации, доступной в любое время.

Пример:

localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // вывод "John"

ℹ️ Таким образом, основное различие между cookie, sessionStorage и localStorage заключается в их сроке жизни, способе использования и том, как они могут быть применены в веб-приложениях.

CodeBase | Frontend

🔥 Установка атрибутов файлов cookie 🔥

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

Эти атрибуты добавляются в строку cookie в виде пар ключ-значение.

⚡️ Вот некоторые из часто используемых атрибутов:

1️⃣ Имя и значение:

Имя и значение определяют данные, которые будут храниться в cookie. Формат выглядит как name=value.

Например, document.cookie = "username=johndoe".

2️⃣ Срок действия (expires):

Атрибут expires определяет срок действия cookie. По умолчанию cookie хранятся до закрытия браузера. Чтобы установить конкретную дату истечения срока действия, используйте expires=date.

Например, document.cookie = "username=johndoe; expires=Thu, 31 Dec 2022 23:59:59 GMT".

3️⃣ Домен (domain):

Атрибут domain указывает на домен, к которому принадлежит cookie. По умолчанию cookie связаны с текущим доменом. Для явного указания домена используйте атрибут domain.

Например, document.cookie = "username=johndoe; domain=example.com".

4️⃣ Путь (path):

Атрибут path определяет путь в домене, по которому доступен cookie. По умолчанию cookie доступен для всего домена. Чтобы ограничить cookie определенным путем, укажите атрибут path.

Например, document.cookie = "username=johndoe; path=/admin".

5️⃣ Безопасность (secure):

Атрибут secure гарантирует, что cookie передается только через безопасное HTTPS-соединение. Для защиты cookie включите атрибут secure.

Например, document.cookie = "username=johndoe; secure".

CodeBase | Frontend | #js

⚡️ reveal.js ⚡️

🖥 reveal.js - это open-source фреймворк, предназначенный для создания HTML-презентаций.

➡️ Он обладает широким спектром функций:

🔵 включая поддержку Markdown
🔵 возможности анимации
🔵 экспорт в PDF
🔵 заметки для докладчика
🔵 поддержку верстки в LaTeX
🔵 подсветку синтаксиса для кода
🔵 удобное API.

🔗 Ссылка

CodeBase | Frontend | #js #framework

🟢 Крутой макет интернет магазина: Дроны 🟢

Поможет прокачать вам свои навыки!

🔵 Технологии: HTML/CSS, JS
🔵 Страницы: Многостраничный

🔗 Ссылка

CodeBase | Frontend | #макет

⚡️ WEBPACK ⚡️

➡️ Утилита для веб-разработчика, которая объединяет JavaScript- и CSS-файлы в один файл, известный как "bundle".

🟢 При работе над крупными проектами возникает необходимость эффективно организовывать код.

🟢 Хранение всего кода огромного проекта в одном файле неудобно, а ручное разделение и последующая сборка также не оптимальны.

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

CodeBase | Frontend | #webpack

🌟Анимация смены текста 🌟

🔵 Реализовано на HTML, CSS и JS

🔗 Ссылка

Code Base | Frontend

🟢 SAAS 🟢

⚡️ Sass — один из самых продвинутых и надежных CSS препроцессоров, пользующихся высокой популярностью среди опытных специалистов.

🟢 Возможность совместимости с различными версиями CSS позволит вам использовать любые CSS библиотеки в вашем проекте.
🟢 CSS препроцессоры, обладающие таким богатым функционалом, как Sass, являются редкостью.
🟢 Sass является одним из самых опытных CSS препроцессоров, который накопил множество знаний за свою долгую историю.
🟢 Удобство использования Sass фреймворков, таких как Bourbon, значительно облегчит жизнь разработчику. Мы также используем Bourbon в определенных выпусках Джедая верстки при работе с Sass.
🟢 Синтаксис Sass предлагает выбор между двумя вариантами: упрощенным (SASS) и более похожим на CSS (SCSS), чтобы каждый мог выбрать наиболее удобный.

🔗 Посмотреть урок [34:43]

CodeBase | Frontend | #обучение #sass

🟢 Макет cайта школы серфинга: Wawe 🟢

🔵 Технологии: HTML/CSS, JS
🔵 Страницы: Одностраничный

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

CodeBase | Frontend | #макет

⚡️ Эффект наведения с подсветкой ⚡️
 
🟣Светящийся эффект наведения на карточках, реализованный с использованием CSS.

🔗 Ссылка

CodeBase | Frontend | #html #css

⚡️Приложение для поиска фильмов с помощью React (с хуками) ⚡️

➡️ Чему вы научитесь

➡️ Создавая данное приложение, вы улучшите навыки работы с React, использовав новые хуки API.

➡️ Проект включает в себя компоненты React, разнообразные хуки, взаимодействие с внешним API и стилизацию с помощью CSS.

➡️ Стек технологий и особенности

🟢 React с хуками
🟢 create-react-app
🟢 JSX
🟢 CSS

Благодаря отсутствию классовых компонентов, эти проекты станут отличным введением в функциональное программирование с React и наверняка помогут вам улучшить свои навыки.

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

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

CodeBase | Frontend | #react #project

🖥 Lucide Icons представляет собой привлекательный и единый набор иконок для веб-приложений.

✔️ Установка

— npm i lucide

➡️ Этот проект является форком проекта Feather Icons и управляется сообществом, полностью открытым для использования.

➡️ Lucide постоянно расширяется новыми иконками, при этом сохраняя оригинальный минималистичный дизайн.

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

CodeBase | Frontend | #icons

⚡️ Эффект волн - очень привлекательная анимация логотипа.

🔵 Реализована с использованием SCSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend | #scss_js

⚡️ componentWillUnmount ⚡️

➡️ Этот метод вызывается прямо перед удалением компонента из DOM. Это важное место для выполнения задач по очистке, таких как остановка таймеров, отписка от событий или освобождение ресурсов для предотвращения утечек памяти.

🗣 Пример кода:

jsx
import React, { Component } from 'react';

class TimerComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      seconds: 0,
    };
    this.timer = null; // Инициализация таймера
  }
  // При монтировании компонента, запускаем таймер
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ seconds: this.state.seconds + 1 });
    }, 1000); // Обновление каждую секунду (1000 миллисекунд)
  }
  // При размонтировании компонента, очищаем таймер, чтобы избежать утечки памяти
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <>
        <h1>Timer Component</h1>
        <p>Прошедшее время: {this.state.seconds} секунд</p>
      </>
    );
  }
}
export default TimerComponent;

⏺ TimerComponent класс инициализирует состояние seconds для отслеживания времени. В componentDidMount устанавливается таймер, а в componentWillUnmount он очищается. Таймер обновляет время каждую секунду. Компонент отображает прошедшее время. Очистка таймера в componentWillUnmount предотвращает утечки ресурсов.

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

CodeBase | Frontend | #react_js

⚡️ QUOKKA ⚡️

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

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

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

🔗 Ссылка

CodeBase | Frontend | #plugins

🖼️ 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

⚡️ 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

⚡️ 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

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

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

npm install tamagui @tamagui/config

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

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

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

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

🖥 GitHub
💩 Доки

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

CodeBase | Frontend | #react

⚡️ 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

⚡️ 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