🖼️ React: Инструменты 🖼️

➡️ По умолчанию в производственной сборке (когда process.env.NODE_ENV === 'production') инструменты разработчика не включены.

➡️ Существует два способа добавления инструментов в приложение: плавающий (floating) и встроенный (inline).

🔵 Плавающий режим:

import { ReactQueryDevtools } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

Настройки:

🟢 initialIsOpen - при установке в значение true, панель инструментов по умолчанию будет открыта.
🟢 panelProps - применяется для добавления свойств к панели, таких как className, style и другие.
🟢 closeButtonProps - служит для добавления свойств к кнопке закрытия панели.
🟢 toggleButtonProps - используется для добавления свойств к кнопке переключения.
🟢 position: "top-left" | "top-right" | "bottom-left" | "bottom-right" - указывает положение логотипа React Query для открытия/закрытия панели.

🔵 Встроенный режим:

import { ReactQueryDevtoolsPanel } from 'react-query/devtools'

const App = () => (
    {/* Другие компоненты */}
)

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

CodeBase | Frontend

⚡️ Перебор массива элементов ⚡️

1️⃣ Рекомендуется использовать цикл forEach:

const elements = document.querySelectorAll('.my-element');

elements.forEach((el) => {
  console.log(el);
  // Выполнение действий...
});

2️⃣ То же самое, но с использованием spread-оператора:

[...elements].forEach((el) => {
  // Выполнение действий...
});

3️⃣ Использование метода массива для NodeList:

Array.from(elements).forEach((el) => {
  // Выполнение действий...
});

// Или

[].forEach.call(elements, (el) => {
  // Выполнение действий...
});

// Или

[].slice.call(elements, 0).forEach((el) => {
  // Выполнение действий...
});

Здесь метод массива .forEach передается псевдомассиву NodeList (который ранее не имел метода forEach) с помощью метода call.

4️⃣ Использование более быстрого цикла for:

```javascript
for (let i = 0; i < elements.length; i++) {
  // Выполнение действий с elements[i]
}

Если понравился формат, жду 🔥🔥🔥

CodeBase | Frontend

👩‍💻 Хук useState в React

useState — это хук, который позволяет добавлять состояние в функциональные компоненты. Это проще, чем управлять состоянием в классовых компонентах, и делает код более чистым и понятным.

⚙️ Как использовать useState?

Для начала нужно импортировать хук из библиотеки React:

import React, { useState } from 'react';

Затем можно объявить состояние внутри вашего компонента:

function Counter() {
  // Инициализация состояния с начальным значением 0
  const [count, setCount] = useState(0);

  // Функция для увеличения счётчика
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Вы нажали {count} раз</p>
      <button onClick={increment}>Нажми меня</button>
    </div>
  );
}

💬 Что здесь происходит?

🟢 Инициализация состояния: useState(0) возвращает массив из двух элементов: текущего значения состояния (count) и функции для его обновления (setCount).

🟢 Обновление состояния: setCount(count + 1) устанавливает новое значение для count, и компонент перерисовывается с обновленным состоянием.

Состояний может быть несколько. Вы можете использовать несколько хуков useState в одном компоненте для управления различными состояниями.

Если пост вам понравился и хотите больше подобного контента с примерами, оставляйте ваши реакции 🔥

CodeBase | Frontend

⚡️Анимация перехода от дня к ночи ⚡️

Крутое решение для вашего проекта. Красиво, удобно, лаконично. Пользуйтесь на здоровье!)

🔵Технологии: SVG, SCSS и JavaScript.

🔗 Ссылка

CodeBase | Frontend

⚡️ Маскирование в CSS при помощи свойства mask ⚡️

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

➡️ Для этого свойства можно указать параметры, например:

mask: url("../shape.png"); 
mask-repeat: no-repeat; 
mask-size: cover; 
mask-position: center; 

➡️ или записать все в одну строку:

mask: url("../img/shape.png") center/cover no-repeat;

CodeBase | Frontend

⚡️ Знакомство с DOM ⚡️

🟢Браузер рассматривает все теги в HTML-документе как объекты, где одни теги могут содержать другие теги, что делает их дочерними. Проще говоря, HTML-документ представляет собой древовидную структуру с разветвленными элементами тегов, что и составляет DOM (Document Object Model).

Итак, самая простая страница:

<html>
<head>
    <title>Page title</title>
</head>
<body>
    <p>Текст</p>
    <button>Click Me</button>
</body>
</html>

➡️ Этот пример представляет собой минимальную HTML-страницу. Убедитесь, что вы сохраняете эту разметку в формате .html, чтобы браузер мог ее корректно отобразить.

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

🟢 Внутри тега <html> лежат все остальные теги: <head>, <body>. Внутри же этих тегов, например, <head> лежит тег <title>.

🟢 Все, что существует внутри HTML-документа, является частью DOM-дерева.

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

➡️ Давайте подытожим, DOM позволяет нам крутить и вертеть всеми элементами нашего HTML-документа. Мы можем изменить положение элемента, цвет, да почти всё что угодно.

CodeBase | Frontend

⚡️ Псевдокласс ::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