CodeBase | Frontend

Ведем себя хорошо! CodeBase | Frontend | #meme

⚡️ Day.js – это минималистичная библиотека для работы с датами и временем, лучшая альтернатива Moment.js. ➡️ Она предоставляет простой API для выполнения различных операций, включая: • конвертацию и локализацию дат; • форматирование дат; • парсинг и валидацию дат и времени; • работу с временными зонами.

Особенность Day.js – использование неизменяемых объектов для хранения данных, что гарантирует согласованность данных и упрощает работу с ними. Библиотека также предоставляет набор методов для выполнения сложных операций с датами и временем.

✔️ Главное преимущество: размер библиотеки – 2 КБ. 👩‍💻 GitHub CodeBase | Frontend | #tool

⚡️Profile Card UI — Интерактивная визитка с анимированными кнопками. Технологии: Svg, SCSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

Отличное предложение! CodeBase | Frontend | #meme

👩‍💻 Как работает свойство position: sticky в CSS? Свойство position: sticky позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости. ➡️ Пример:

<div class="container">
  <h2 class="sticky-header">Я остаюсь на месте!</h2>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
</div>

<style>
  .container {
    height: 200px;
    overflow: auto;
    border: 1px solid black;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* Фиксирует элемент у верхнего края контейнера */
    background-color: lightblue;
    padding: 10px;
  }
</style>

🗣️ В этом примере заголовок с классом .sticky-header остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.

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

CodeBase | Frontend | #css

Бесплатный практический вебинар: Профессия «Frontend-разработчик». ⏰ Когда: 19 ноября в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.

⚡️ Chance – предоставляет набор функций и методов, которые позволяют генерировать случайные числа, строки, имена, номера телефонов, адреса электронной почты и многое другое.

Такие данные нужны для тестирования приложений и веб-сервисов, симуляции, анализа и визуализации данных.

➡️ Эффективно работает с датами и временем. ✔️ Главное преимущество: размер библиотеки – 55 КБ. 👩‍💻 GitHub CodeBase | Frontend | #tool

Было? CodeBase | Frontend | #meme

⚡️Weather Widgets — Анимированный виджет погоды. Технологии: Svg, SCSS, TypeScript 🔗 Ссылка CodeBase | Frontend | #animate

👩‍💻 Как работает метод Array.prototype.reduce() в JavaScript? Метод reduce() позволяет последовательно обрабатывать элементы массива, вычисляя итоговое значение, например, сумму чисел, объединение строк или создание объектов. ➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Вычисление суммы элементов массива
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum); // 15

🗣️ В этом примере reduce() принимает два аргумента: функцию обратного вызова и начальное значение аккумулятора (0). Функция обратного вызова выполняется для каждого элемента массива, обновляя значение аккумулятора.

reduce() полезен для обработки массивов, позволяя выполнять сложные операции в компактной и читаемой форме.

CodeBase | Frontend | #js

Все мы с этого начинали 🍄 CodeBase | Frontend | #meme

⚡️ Swiper – библиотека для создания стильных и адаптивных слайд-шоу, каруселей и галерей.

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

➡️ Компоненты Swiper адаптируются к любым размерам экрана – слайдеры будут отлично выглядеть и одинаково хорошо работать на любых устройствах. ✔️ Главное преимущество: использует технологию виртуальных слайдов, которая загружает в DOM только необходимые изображения. 👩‍💻 GitHub CodeBase | Frontend | #tool

⚡️On-Scroll Fire Transition — Страница с интересной реализацией скрола. Технологии: CSS, JavaScript 🔗 Ссылка CodeBase | Frontend | #animate

Начните карьеру фронтенд-разработчика с Hexlet! Хотите стать мастером создания современных веб-интерфейсов? Пройдите курс фронтенд-разработки и за 10 месяцев овладейте всеми необходимыми навыками, от HTML и CSS до JavaScript и React. 🎁 🎃 Бонусы к Черной пятнице! Вас ждет специальное предложение - скидка до 81 000 ₽. на обучение и второй курс в подарок! Научитесь программировать на языке JavaScript и создавать пользовательские интерфейсы сайтов и приложений. Вы будете работать над реальными проектами, создадите портфолио и получите поддержку опытных менторов. А во время обучения вы также поучаствуете в Карьерном треке! Пройдите 5 бесплатных уроков и откройте для себя увлекательный процесс обучения. Поймите, насколько интересен и перспективен этот путь, и получите уникальную возможность продолжить обучение на полном курсе со скидкой!

Хотя бы конкретика появилась CodeBase | Frontend | #meme

CodeBase | Frontend | #meme

👨‍💻 Изучай фронтенд по мини-гайдам! Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript ➡️ Подписывайся на WebTaverna 😮 А также залетай в наш новый канал 🆕 "Фронтенд Заметки", где ты найдешь бесплатные видео-уроки и статьи по HTML, CSS, JS, а также по React.js и Vue.js

👩‍💻 Как работает свойство box-sizing в CSS? Свойство box-sizing в CSS определяет, как вычисляются размеры элемента, включая его отступы и границы. Оно позволяет контролировать, включаются ли padding и border в общую ширину и высоту элемента. ➡️ Пример:

<style>
  .box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
  }
  .content-box {
    box-sizing: content-box; /* значение по умолчанию */
  }
  .border-box {
    box-sizing: border-box;
  }
</style>

<div class="box content-box">
  Content-box: ширина 200px + padding 20px + border 5px
</div>

<div class="box border-box">
  Border-box: общая ширина 200px, включая padding и border
</div>

🗣️ В первом случае (content-box) ширина элемента составляет 200px, но с учетом padding и border общая ширина увеличивается до 250px. Во втором случае (border-box) общая ширина элемента остается 200px, так как padding и border включены в эту ширину.

Использование box-sizing: border-box; упрощает расчет размеров элементов и предотвращает неожиданные изменения макета при добавлении отступов и границ.

CodeBase | Frontend | #css

🖥 Vite vs CRA: Почему разработчики массово переходят на новый инструмент Веб-разработчики уже давно привыкли к Create React App (CRA) как к стандарту для быстрого старта проектов. Но сейчас всё больше команд выбирают Vite – и на это есть причины! В статье разобраны ключевые отличия между этими инструментами, которые объясняют массовую миграцию на Vite. ➡️ Перейти к статье CodeBase | Frontend | #articles

🔥 Готов погрузиться в мир фронтенда и вёрстки? На канале Будни разработчика тебя ждут: 🚀 Прямые советы, как стартовать во фронтенде ⚙️ Приёмы для упрощения рабочих процессов 💡 Хаки для крутого и чистого кода Становись частью сообщества, которое помогает развиваться! Подписывайся и стартуй уже сегодня! ⬇️