Слова программиста

Читать 🧑‍💻

#полезности

Как создавать динамические стили с помощью SCSS-циклов

SCSS-циклы упрощают работу с однотипными стилями, например, при задании разных цветов для элементов.

SCSS:

$button-colors: (primary: #3498db, success: #2ecc71, danger: #e74c3c);
.button {
  @each $name, $color in $button-colors {
    &--#{$name} {
      background-color: $color;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}

Генерируемый CSS:

.button--primary {
  background-color: #3498db;
  color: #fff;
}
.button--success {
  background-color: #2ecc71;
  color: #fff;
}
.button--danger {
  background-color: #e74c3c;
  color: #fff;
}

#какэтосделать

Как использовать псевдокласс :has() для навигации

С помощью :has() можно улучшить UX меню. Например, сделать так, чтобы активный раздел подсвечивался, даже если вы находитесь на дочерней странице.

HTML:

<nav>
  <ul>
    <li><a href="/">Главная</a></li>
    <li>
      <a href="/blog">Блог</a>
      <ul>
        <li><a href="/blog/post1">Пост 1</a></li>
        <li><a href="/blog/post2">Пост 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS:

nav li:has(a.active) > a {
  font-weight: bold;
  color: #007bff;
}

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

#какэтосделать

Как создать адаптивный текстовый градиент

Градиенты в тексте — это модный тренд, который можно использовать не только для заголовков, но и для адаптивных интерфейсов.

HTML:

<h1 class="gradient-text">Смотри, я градиентный!</h1>

CSS:

.gradient-text {
background: linear-gradient(90deg, #ff6ec4, #7873f5, #00d4ff);
-webkit-background-clip: text;
color: transparent;
font-size: clamp(2rem, 5vw, 4rem);
}
clamp() обеспечивает адаптивный размер текста.
linear-gradient() позволяет настроить цвета и направление.

#какэтосделать

Макет для тренировки (terra)

Перейти к макету 🧑‍💻

#практика | #макет

JS Задача: Event Emitter

Описание:
Разработайте класс EventEmitter. Этот интерфейс аналогичен (но с некоторыми отличиями) интерфейсу, описанному в Node.js или интерфейсу назначения событий в DOM. EventEmitter должен позволять подписываться на события и отправлять их.

Ваш класс EventEmitter должен иметь следующие два метода:
subscribe - Этот метод принимает два аргумента: имя события в виде строки и функцию обратного вызова. Эта функция обратного вызова будет вызвана позже, когда событие будет отправлено.
У события должно быть несколько слушателей для одного и того же события. При отправке события с несколькими обратными вызовами каждый из них должен вызываться в том порядке, в котором они были подписаны. Должен быть возвращен массив результатов. Можно предположить, что ни один из обратных вызовов, передаваемых для subscribe, не является ссылочно идентичным.
Метод subscribe также должен возвращать объект с методом unsubscribe, который позволяет пользователю отказаться от подписки. При его вызове обратный вызов должен быть удален из списка подписок, а значение undefined должно быть возвращено

Пример:

Input: 
actions = ["EventEmitter", "emit", "subscribe", "subscribe", "emit"], 
values = [[], ["firstEvent"], ["firstEvent", "function cb1() { return 5; }"],  ["firstEvent", "function cb1() { return 6; }"], ["firstEvent"]]
Output: [[],["emitted",[]],["subscribed"],["subscribed"],["emitted",[5,6]]]
Explanation: 
const emitter = new EventEmitter();
emitter.emit("firstEvent"); // [], no callback are subscribed yet
emitter.subscribe("firstEvent", function cb1() { return 5; });
emitter.subscribe("firstEvent", function cb2() { return 6; });
emitter.emit("firstEvent"); // [5, 6], returns the output of cb1 and cb2

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Как создать адаптивный текстовый градиент
2. :has
3. Слова программиста

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Frontend разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Дизайнер
2. Web дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Вопросы по css на собеседовании

Читать 👨‍💻

#css | #полезности

SEO фишки

Читать 👨‍💻

#полезности

Полезные расширения Chrome для верстки

Читать 👨‍💻

#полезности

Макет для тренировки (ft score)

Перейти к макету 🧑‍💻

#практика | #макет

JS Задача: Список задач (To-Do List)

Читать 👨‍💻

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Вопросы по css на собеседовании
2. SEO фишки
3. Полезные расширения chrome

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. HTML верстальщик
3. Стажер HTML верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Стажер веб дизайнер
2. Web дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Ссылки mailto: и tel:

Читать 🧑‍💻

#html | #теория

Что такое PWA и почему это важно для современного веба?

В мире современных технологий пользователи ожидают быстрые, удобные и надежные приложения. Здесь на помощь приходит концепция Progressive Web Apps (PWA) — прогрессивных веб-приложений.

Что такое PWA?
PWA — это веб-приложения, которые работают как нативные мобильные приложения. Они разрабатываются с использованием веб-технологий, таких как HTML, CSS и JavaScript, но обладают возможностями, которые раньше были доступны только нативным приложениям.

Основные характеристики PWA:
- Установка: PWA можно добавить на главный экран устройства без необходимости загрузки из магазина приложений.
- Высокая производительность: Кэширование позволяет сократить время загрузки.
- Обновления в реальном времени: Приложение всегда актуально, так как оно обновляется прямо с сервера.

Ключевые преимущества PWA
- Кросс-платформенность: Одно приложение работает на всех устройствах — компьютерах, планшетах и смартфонах.
- Экономия ресурсов: PWA занимают меньше места, чем нативные приложения, и не требуют установки через App Store или Google Play.
- Повышение вовлеченности: Благодаря push-уведомлениям и возможности работы офлайн, пользователи остаются дольше на сайте.
- Простая разработка: Нет необходимости писать код отдельно для Android и iOS.
Как PWA изменяет бизнес?
Компании, которые внедряют PWA, часто отмечают рост конверсий и снижение отказов. Примером может служить компания AliExpress: после перехода на PWA время, проводимое пользователями на сайте, увеличилось на 74%, а конверсии — на 104%.

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

#полезнаястатья

Макет для тренировки (Natitanic)
Лендинг - портфолио

Перейти к макету 🧑‍💻

#практика | #макет

Задача: Фиксация блока при скролле (CSS + HTML)

Представьте, что вам нужно создать страницу с фиксированной шапкой и основным контентом. Шапка должна оставаться видимой при прокрутке страницы.
Создайте HTML-структуру с блоками: header, main, и footer.
Напишите CSS, чтобы шапка оставалась на экране, а остальные блоки прокручивались.

Дополнительно:
Как сделать, чтобы шапка становилась полупрозрачной при скролле?

#домашка