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

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

Лучшие статьи @free_html_lessons:
1. Методология ECSS
2. Структура данных js
3. Как сделать кастомные чекбосы без js?

Лучшие фронтенд вакансии @job_webdev:
1. Разработчик интерфейсов
2. angular разработчик
3. Веб-разработчик

Лучшие дизайн вакансии @job_webdesign:
1. Продуктовый дизайнер
2. Web-дизайнер
3. Web designer

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

Что будет в консоли? Асинхронные функции: Порядок выполнения с await

async function f() {
console.log(1);
const promise = new Promise((resolve) => {
  console.log(2);
  setTimeout(() => {
    console.log(3);
    resolve('готово!');
    console.log(4);
  });
});
console.log(5);

const result = await promise;
console.log(6);
console.log(result);
return 'Result';
}

f();
console.log(7);

Ответ:
async function f() {
console.log(1); // Синхронно #1
const promise = new Promise((resolve) => {
console.log(2); // Синхронно #2 (в executor)
setTimeout(() => { // Макрозадача #1
console.log(3); // Внутри макрозадачи #1.1
resolve('готово!'); // Разрешает промис, ставит возобновление 'f' в микрозадачи
console.log(4); // Внутри макрозадачи #1.2
}, 0); // Минимальная задержка
});
console.log(5); // Синхронно #3

// 'f' приостанавливается здесь, ждет разрешения 'promise'
const result = await promise; // Возобновится как микрозадача после resolve()

// Возобновление 'f' (Микрозадача #1)
console.log(6); // После await #1
console.log(result); // После await #2
return 'Result';
}

f(); // Запускает 'f'
console.log(7); // Синхронно #4 (после запуска 'f', но до завершения await)

// Порядок вывода:
// 1 ← Синхронно #1
// 2 ← Синхронно #2
// 5 ← Синхронно #3
// 7 ← Синхронно #4
// 3 ← Макрозадача #1.1
// 4 ← Макрозадача #1.2 (Promise resolved)
// 6 ← Микрозадача #1 (Возобновление f, после await #1)
// "готово!" ← Микрозадача #1 (Возобновление f, после await #2)

#домашка
Задача из hackfrontend.com

Событийная модель

Читать 👨‍💻

#js

Как сделать кастомные чекбосы без js?

Читать 👨‍💻

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

Специфичность css

Читать 👨‍💻

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

Структура данных js

Читать 👨‍💻

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

Методология ECSS

Читать 👨‍💻

#полезности

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

Лучшие статьи @free_html_lessons:
1. Инструменты и ресурсы для веб-разработчиков
2. Селектор :link
3. Использование событий keydown и keyup в javascript

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

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

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

MyReadonly

Напишите тип MyReadonly который делает все поля только для чтения.

type User = {
  id: number
  name: string
}

type MyReadonly<T> = any

const user: MyReadonly<User> = { id: 1, name: "John" }

user.name = "Jane"

#домашка #typescript

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

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

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

Использование событий keydown и keyup в javascript

Читать 👨‍💻

#js | #теория

Делаешь сайты на фрилансе? А теперь представь: весь путь от ТЗ до сдачи проекта — на одной платформе

Poehali.dev превращает текстовое описание в готовый продукт: сайт, лендинг или приложение — с бэкендом и публикацией на домен. Вёрстку, картинки, деплой берёт на себя ИИ-агент. Ты же контролируешь и правишь, где нужно.

Итог: типовой лендинг — за вечер. Остальное время на новые заказы или сложные проекты с высоким чеком.

Внутри:
• фичи для фрилансеров — свои шаблоны, передача проекта и чат с заказчиком
• шаблоны и расширения — чтобы создавать быстро, а не с нуля
• хостинг — встроенные бэкенд и база данных создают не просто картинку, а рабочий сайт с мгновенной публикацией на твой домен
• ИИ-агент — сам планирует, пишет и запускает, а не просто даёт ответ

Работает на русском языке и без VPN. Подходит для лендингов курсов, портфолио и продуктовых страниц: выполняй проекты быстрее — зарабатывай больше.

👉 Попробовать бесплатно
По промокоду [ LAND4B ] первый лендинг в подарок. Успей до 31.07.

This: контекст выполнения функций

Читать 👨‍💻

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

Селектор :link

Читать 👨‍💻

#css | #теория

Инструменты и ресурсы для веб-разработчиков

Читать 👨‍💻

#полезности

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

Лучшие статьи @free_html_lessons:
1. Выравнивание по центру в CSS
2. ТОП-13 книг по JavaScript
3. Что такое toast уведомления + плагины

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

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

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

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

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

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