Вёрстка сайтов | HTML, CSS, JS

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

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

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

Анимированная буквицы (Drop cap)

Смотреть на codepen 👨‍💻

#практика

Создание голосовых интерфейсов с помощью Web Speech API

Читать 👨‍💻

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

3D анимация волны

Смотреть на codepen 👨‍💻

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

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

Лучшие статьи @free_html_lessons:
1. Как сделать светлую и темную тему?
2. Генераторы и yield
3. Макет для тренировки (Копилка)

Лучшие фронтенд вакансии @job_webdev:
1. разработчик интерфейсов
2. HTML-верстальщик
3. Middle Frontend-разработчик / HTML-верстальщик (Vue 3, Tailwind CSS)

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui-дизайнер
2. Стажёр web-дизайнер (B2B)
3. Web-дизайнер

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

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

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

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

Как работать с модулями в JavaScript: import/export

Читать 👨‍💻

#js | #теория

Генераторы и yield

Читать 👨‍💻

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

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

Читать 👨‍💻

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

Как сделать светлую и темную тему?

Читать 👨‍💻

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

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

Лучшие статьи @free_html_lessons:
1. HTMLCollection и NodeList
2. Атрибут autofocus
3. JS Задача: Event Emitter

Лучшие фронтенд вакансии @job_webdev:
1. javascript developer
2. HTML-верстальщик
3. frontend developer

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui-дизайнер
2. Web-дизайнер
3. Графический дизайнер

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

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

#домашка

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

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

#макетдлятренировки

Оптимизация производительности веб сайтов

Читать 👨‍💻

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

Атрибут autofocus

Атрибут autofocus в HTML используется для установки фокуса на определенный элемент формы при загрузке страницы. Когда атрибут autofocus присутствует в теге элемента формы, этот элемент автоматически получает фокус, что позволяет пользователям сразу начать вводить данные без необходимости щелкать на поле ввода.

Пример использования атрибута autofocus:

<form>
  <label for="name">Имя:</label>
  <input type="text" id="name" name="name" autofocus>
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Отправить">
</form>

В данном примере, при загрузке страницы, поле ввода с id "name" будет автоматически получать фокус, что позволит пользователю сразу начать вводить свое имя.

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

#html | #теория

Как сделать кнопку копирования?

Читать 👨‍💻

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

HTMLCollection и NodeList

Читать 👨‍💻

#js