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

:where() Читать 👨‍💻 #css | #теория

Задача: Реализация алгоритма для поиска оптимального маршрута в графе Вам предстоит разработать программу на JavaScript, которая будет находить оптимальный маршрут между двумя точками в графе. Каждая точка графа представляет собой город, а ребра между точками - дороги, с весами, представляющими стоимость перемещения между городами. Условия: Граф может быть представлен в виде матрицы смежности или списка смежности. Программа должна использовать алгоритм поиска кратчайшего пути, такой как алгоритм Дейкстры или алгоритм A*. Программа должна учитывать возможные ограничения, такие как односторонние дороги, закрытые дороги и т. д. Пользователь должен иметь возможность указать начальную и конечную точку маршрута. #домашка@free_html_lessons

Макет для тренировки (pinewood) Перейти к макету 🧑‍💻 #практика | #макет

Как сделать звездный рейтинг? Читать 👨‍💻 #какэтосделать

День сурка frontend-разработчика Зарплата стоит, скучные задачи день за днем, календарь забит созвонами, которые не влияют вообще ни на что. Откликаешься на вакансии, а в ответ тишина либо какие-то мутные конторы. На собесах вместо нормальной оценки навыков цирк с алгоритмами на скорость, как будто ты на олимпиаде, а не работу ищешь. И самое неприятное, пока ты варишься в этом болоте, кто-то спокойно проходит собесы и уходит в Яндекс, VK или на хорошую Валютную удаленку без лишней драмы.

Есть классные проекты и сильные команды, где разработчиков действительно ценят, дают расти, поддерживают развитие и платят достойно и ты можешь туда попасть!

👋 Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Я за руку довожу до оффера на хорошую позицию в Big Tech и сопровождаю на испытательном сроке. Также из учеников я собираю комьюнити, где уже более 220 frontend-разработчиков🫂 А в своем канале: 👉Объясняю, как проходить HR-фильтр и превращать отклики в реальные приглашения 👉Помогаю найти мотивацию, борюсь убеждениями, которые мешают развиваться 👉На примерах объясняю, как проходить собеседования, включая техничку 👉Разбираю резюме и делюсь лайфхаками, например как аккуратно “пинговать” рекрутеров А еще регулярно публикую полезные материалы: ▪️Задачи, на которых валяться кандидаты ▪️База по микрофронтам ▪️Подборка из 100+ каналов с вакансиями для разработчиков ▪️100 вопросов, которые точно помогут тебе на собеседовании ▪️Чек лист проверки своего резюме А еще у меня множество успешных кейсов и отзывов, найти их можно в канале. Реклама, erid: 2W5zFHF7z6D ИП Галактионов Тихон Витальевич, ИНН 771618975809

CSS счетчики Читать статью👨‍💻 #css | #полезности

Как создать и использовать цветовую палитру в CSS Читать 👨‍💻 #какэтосделать

Как использовать звук на сайтах Читать 👨‍💻 #полезнаястатья

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Как сделать выделение текста другим цветом? 2. @layer css 3. Различные эффекты на чистом css Лучшие фронтенд вакансии @job_webdev: 1. Frontend разработчик Ozon 2. Верстальщик лендингов 3. HTML-верстальщик Лучшие дизайн вакансии @job_webdesign: 1. Web-дизайнер 2. Web-дизайнер 3. UX/UI-дизайнер #лучшеезанеделю

Задача на JavaScript: Реализация очереди с помощью массива Читать 👨‍💻 #домашка

Макет для тренировки (EASYearn) Средняя сложность. Лендинг и личный кабинет Перейти к макету 🧑‍💻 #практика | #макет

Различные эффекты на чистом css Смотреть на codepen 👨‍💻 #практика

image-rendering Читать 👨‍💻 #css | #полезности

@layer css Читать 👨‍💻 #css | #теория

Как сделать выделение текста другим цветом? Одна из интересных функций CSS3, носит имя "::selection", при помощи которой можно заменить стандартный цвет выделения текста в браузере. Поддержка браузерами 83% ::selection { background: #333; /* Safari */ } ::-moz-selection { background: #333; /* Firefox */ } Цвет выделения текста будет серым. #css | #полезности

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Полезные html трюки 2. Проверка орфографии в браузере 3. Почему стоит перестать использовать Enum в TypeScript? Лучшие фронтенд вакансии @job_webdev: 1. Frontend разработчик 2. Начинающий верстальщик 3. разработчик интерфейсов Лучшие дизайн вакансии @job_webdesign: 1. Графический дизайнер 2. UX дизайнер 3. UX/UI-дизайнер #лучшеезанеделю

Взял задачу. Собрал бота. Заработал 15 000 рублей. Спрос на чат-ботов в России достиг 10 786 запросов за месяц. Большинство закрывает Владислав Пурвиньш силами учеников. Пока ты считаешь дни до зарплаты — 206 человек уже закрыли очередной заказ на бота и получили от 15 000 рублей. Без офиса. Без долгого обучения. Никто из них не умеет программировать. Просто научились одному инструменту. И бизнесы платят им 200-250 000 рублей в месяц. Схема простая: берёшь реальный заказ из базы → собираешь бота по шаблону → наставник проверяет → сдаёшь и забираешь деньги. Если умеешь открыть ворд или запустить косынку — справишься. Старт 70-80 000 рублей. С опытом от 200 000 рублей в месяц. Запусти бота, там пошаговый план как в 2026 году зарабатывать как нефтяник, только с ноута. 👉 @other_digital_bot

Мемоизация Реализуйте функцию memoize, которая принимает функцию fn и возвращает её мемоизированную версию. Мемоизированная функция никогда не должна вызывать fn дважды для одного и того же набора аргументов — она запоминает результат первого вызова и возвращает его из кеша для всех последующих. Два объекта с разной ссылкой, но одним и тем же набором полей и значений, считаются одинаковыми. Формат ввода Вы должны экспортировать функцию memoize, которая в качестве аргумента принимает функцию fn. Функция fn в качестве аргументов может принимать примитивы (строки, числа, булевы значения), массивы и объекты. Значения, которые нельзя сериализовать через JSON.stringify (например, функции, undefined, Symbol, BigInt, циклические ссылки и т. п.), передаваться не будут. Два массива с одинаковыми элементами, расположенными в разном порядке, считаются разными. Например, [1, 2] и [2, 1] — это разные массивы. Пример: Ввод

    return a + b;
}

export const callingArguments = [
    [1,2],
    [1,2]
];

Вывод

Result: 3
Invoked: true

memoizedFn(1, 2)
Result: 3
Invoked: false

#домашка

Макет для тренировки (wires) Перейти к макету 🧑‍💻 #макетдлятренировки

Почему стоит перестать использовать Enum в TypeScript? Если вы откроете крупный коммерческий проект на TypeScript, то с высокой вероятностью найдете там конструкции вроде enum Status { Active, Inactive }. Долгое время это считалось хорошим тоном, но сегодня использование Enums это скорее антипаттерн, от которого индустрия постепенно отказывается. Почему «перечисления» ломают логику TypeScript и чем их заменить, чтобы код оставался чистым и предсказуемым. 1. Они генерируют лишний код в рантайме (Runtime Overhead) TypeScript — это надстройка, которая после компиляции полностью исчезает, оставляя чистый JavaScript. Почти все фичи TS (интерфейсы, типы) весят 0 байт в бандле. Но только не enum. Посмотрим, во что превращается обычный enum после компиляции:

// TypeScript
enum Role {
  Admin,
  User
}

// JavaScript (после компиляции)
var Role;
(function (Role) {
    Role[Role["Admin"] = 0] = "Admin";
    Role[Role["User"] = 1] = "User";
})(Role || (Role = {}));

Вместо удаления типов компилятор создает громоздкую самовызывающуюся функцию и объект с двунаправленным маппингом (`Role.Admin` равен 0, а Role[0] равен `"Admin"`). В коммерческих проектах на сотни тысяч строк кода это раздувает бандл буквально на ровном месте. 2. Дыры в безопасности (Numeric Enums) Числовые enum'ы в TS удивительно нестрогие. Вы можете передать в функцию число, которого вообще нет в перечислении, и компилятор не выдаст ошибку:

enum Status {
  Pending,
  Success
}

function setStatus(status: Status) { ... }

// Ошибки нет, хотя статуса 99 не существует!
setStatus(99); 

Современная альтернатива: Union Types + as const Чтобы сохранить все преимущества автодополнения (IntelliSense) и строгости, но не тащить в рантайт лишний JS-код, используют связку обычного объекта и типов:

// 1. Создаем чистый объект с флагом "только для чтения"
const PROJECT_STATUS = {
  PENDING: 'pending',
  SUCCESS: 'success',
  FAILED: 'failed',
} as const;

// 2. Генерируем тип из значений этого объекта
type ProjectStatus = typeof PROJECT_STATUS[keyof typeof PROJECT_STATUS];
// Тип равен: 'pending' | 'success' | 'failed'

// 3. Используем в коде
function updateStatus(status: ProjectStatus) { ... }

updateStatus(PROJECT_STATUS.SUCCESS); // Идеально
updateStatus('unknown'); // Ошибка компиляции

Что мы получаем в итоге? 1. Чистый JS: После компиляции остается только лаконичный плоский объект PROJECT_STATUS. Никаких странных функций. 2. Абсолютная строгость: Передать левое значение или число мимо типа физически невозможно. 3. Удобный рефакторинг: Названия ключей и значений меняются в один клик по всему проекту. #typescript #полезнаястатья