✅ Макет сайта: High Pro ✅

☄️ Крутой макет личного кабинета.

👀 Технологии: HTML/CSS, JS

🔗 Ссылка

CodeBase | Frontend

⚡️ React Range Sliders ⚡️

🔵 Коллекция стильных слайдеров для React

🔗 Ссылка

CodeBase | Frontend

⚡️ GitHub: Терминология ⚡️

Пора обогатить ваш словарь Git перед тем, как мы сделаем первый запрос на слияние (Pull Request).

🟣 Хранилище (repository) — это каталог проекта, который контролируется Git. Внутри этого каталога содержится проект, история изменений и метаинформация проекта (хранится в скрытом каталоге .git).

🟣 Индекс — это место, где записаны имена файлов и их изменения, которые должны быть включены в следующий коммит. С точки зрения фактического хранения, индекс представляет собой просто файл. Файлы не попадают автоматически в индекс, их нужно добавлять явно с помощью команды git add.

🟣 Фиксация (commit) — это сохранение изменений в истории проекта (изменения, внесенные в индекс). Фиксация содержит измененные файлы, имя автора фиксации и время ее создания. Каждая фиксация обладает уникальным идентификатором, который позволяет в любое время вернуться к этой точке. Коммит можно рассматривать как точку сохранения.

🟣 Ветка (branch) — это последовательность фиксаций. По сути, это ссылка на последнюю фиксацию в данной ветке. Ветки не зависят друг от друга — изменения в одной ветке не затрагивают другую (если вы явно этого не попросите). Обычно вы начинаете работу с одной ветки — main, об этом чуть позже.

🟣 Форк (Fork) — это ваше собственное ответвление другого проекта. Это означает, что GitHub создает копию проекта в вашем пространстве имён, и вы можете легко вносить изменения, отправляя их (push) обратно.

🟣 Запрос на слияние (Pull Request) — предложение внести изменения в чужой репозиторий. Например, если вы скопировали чей-то репозиторий, сделали изменения и хотите, чтобы они были включены в оригинальный репозиторий, то вы создаете запрос на слияние с просьбой добавить ваши изменения.

CodeBase | Frontend

⚡️ Макет сайта: 𝗚𝗥𝗘𝗘𝗡 𝗘𝗡𝗘𝗥𝗚𝗬 ⚡️

Чудесный макет сайта "зеленая" энергия. Прокачает ваши навыки!

🟢 Сложность: ⭐️⭐️⭐️⭐️⭐️

🟢 Технологии: HTML/CSS, JS и др.

🔗 Ссылка

CodeBase | Frontend

⚡️ Использование свойства white-space с параметром nowrap ⚡️

🟢 Свойство white-space с параметром nowrap предотвращает автоматический перенос текста на новую строку внутри элемента, даже если текст не помещается в доступной ширине контейнера.

CodeBase | Frontend

⚡️ Крутой концепт прелоадера страницы ⚡️

➡️ Технологии: CSS

🟢 Геометрические фигуры в стиле тетриса непрерывно формируются в правильной последовательности — представляет собой оригинальное решение.

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

🔗 Ссылка

CodeBase | Frontend

🖼️ 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 | #макет