Frontender's notes [ru]

⚙️ Создание анимированного меню навигации Этот короткий CSS код преобразит ваше меню навигации, добавив анимированную полосу подчеркивания при наведении курсора. Полоса будет плавно расширяться от левого края элемента до конца текста.

<nav class="menu">
  <ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">О нас</a></li>
    <li><a href="#">Услуги</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.menu li {
  margin-right: 20px;
}

.menu a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
  position: relative;
}

.menu a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.menu a:hover::after {
  width: 100%;
}

#HTML #CSS

👩‍💻 Как в TypeScript реализовать свойства класса, являющиеся константами? В TypeScript, при объявлении свойств классов, нельзя использовать ключевое слово const. При попытке использования этого ключевого слова выводится следующее сообщение об ошибке: A class member cannot have the ‘const’ keyword. В TypeScript 2.0 имеется модификатор readonly, позволяющий создавать свойства класса, предназначенные только для чтения.

🔽Пример кода

class MyClass {
    readonly myReadonlyProperty = 1;

    myMethod() {
        console.log(this.myReadonlyProperty);
    }
}

new MyClass().myReadonlyProperty = 5; // ошибка, так как свойство предназначено только для чтения

#Собеседование

👩‍💻 Firefly Button Сцена с измененным курсором и анимированной кнопкой. Сделана на CSS и JavaScript. #codepen

👩‍💻 React 19 уничтожит все фреймворки React привносит новые крутые фишки, которые могут оказать существенное влияние на процесс разработки. В этой статье мы подробно рассмотрим ключевые изменения. Читать...

👩‍💻 Используйте исчерпывающую проверку для обнаружения необработанных случаев во время компиляции Когда используется switch-case вместо enum, это хорошая привычка активно ошибаться в case которые не ожидаются, вместо того, чтобы молча игнорировать их. С помощью TypeScript вы можете позволить статической проверке типов найти ошибку раньше, используя тип never:

function getArea(shape: Shape) {
  switch (shape.kind) {
    case 'circle':
      return Math.PI * shape.radius ** 2;
    case 'rect':
      return shape.width * shape.height;
    default:
      // вы получите ошибку типа ниже, если
      // какой-либо shape.kind не обрабатывается выше
      const _exhaustiveCheck: never = shape;
      throw new Error('Unknown shape kind');
  }
}

При этом невозможно забыть обновить функцию getArea при добавлении нового вида фигуры. Смысл этого метода в том, что типу never нельзя присвоить ничего, кроме never. Если все кандидаты shape.kind исчерпываются операторами case, единственным возможным типом, достигающим default: будет never. Однако если какой-либо кандидат не покрыт, он попадёт в ветку default и приведёт к недопустимому значению.

Не представляете свою жизнь без математики и хотите применять её в работе над IT-проектами? Научиться этому помогут короткие образовательные программы от экспертов-практиков. Плюсы таких форматов — большой объём полезной информации в короткий срок, фокус на узкие дисциплины, новые проекты в портфолио, а также активный нетворкинг и обмен идеями. Где найти такие программы? Например, у Яндекс Образования. В июле у них стартует студкемп по математике в ИИ на базе Иннополиса. За две недели вы погрузитесь в актуальные вопросы машинного обучения и больше узнаете о математических методах в искусственном интеллекте. На бесплатной программе ждут студентов старших курсов, обучающихся по направлению Computer Science. Подать заявку можно до 26 мая. Всем, кто успешно пройдёт отбор, организаторы оплатят дорогу и проживание. Переходите на сайт прямо сейчас и заполняйте анкету! Поторопитесь, количество мест ограничено.

👩‍💻 Символы-ключи в WeakMap Теперь можно использовать уникальные символы в качестве ключей. До этого обновления WeakMaps можно было использовать в качестве ключей только объекты. Объекты используются в качестве ключей для WeakMaps, потому что они имеют один и тот же аспект идентичности. Symbol — это единственный примитивный тип в ECMAScript, который позволяет использовать для него уникальные значения. Использовать Symbol теперь можно и в качестве ключа вместо создания нового объекта с помощью WeakMap.

const weak = new WeakMap();

const key = Symbol('my ref');
const someObject = { a:1 };

weak.set(key, someObject);
console.log(weak.get(key));

Frontend meetup 1. Хоп, хлоп, и MVP готов — Дмитрий Карловский, HyOO Нарисуем полноценный фронтенд без чат-ботов. Поднимем базу данных без сервера. Задеплоим всё на статический сервер без боли. И будем наслаждаться результатом без тормозов. 2. Причины деградации перформанса фронтенда — Денис Басковский, МТС Диджитал Почему скорость железа не успевает за веб-приложениями. Причины большого количества JS-кода на сайте. SPA по 20мб уже действительность. Инструменты куда мы смотрим чтобы найти про лесы большого размера сайта. Графики скорости и восприятие клиентов. Почему скорость браузерной страницы лагает на 4090ti, а Cyberpunk идет на максималках. 3. Serverless - уже можно? — Андрей Лаврентьев, NDA Опыт запуска проекта на cloudflare pages и трудности, с которыми пришлось столкнуться на каждом шаге. Модератор Григорий Петров, Devrel, Evrone Эксперт Глеб Михеев, Руководитель ПК, FrontendConf ➖➖➖ 🗓 22 мая, начало в 19:00 мск, Среда 🌐 ОНЛАЙН ✅ Регистрация на мероприятие Реклама, ООО "Эвроне.ру", ИНН 3663057399

👩‍💻 Полноценная поддержка вложенности без препроцессоров Вложенность в CSS — это когда мы помещаем внутри родительского элемента стили дочерних элементов. Вложенность позволяет писать компактный код, и до сих пор она была доступна только в препроцессорах — в Sass и Less.Препроцессор Sass — с чего начать новичку Теперь это можно реализовать в обычном CSS. Например, у родительского элемента .card есть дочерние элементы .title и .content. Мы можем поместить стили дочерних элементов прямо внутрь стилей .card:

.card {
    /* основные стили карточки */
    &:hover,
    &:focus {
        /* стили ховера и состояния фокуса */
    }
    .title {
        /* стили для заголовка внутри карточки */
    }
    .content {
        /* стили для контента внутри карточки */
    }
}

В таком коде легче искать нужный селектор — всё сгруппировано в одном месте.

Yandex приглашает поучаствовать в Practical ML Conf 14 сентября! На конференции поговорим о том, как применять ML-технологии в бизнесе и реальных продуктах. Регистрируйтесь уже сейчас — те, кто сделает это раньше всех, попадут на закрытый мини-ивент в июле. А если хотите поделиться своим опытом в ML, станьте спикером, оставив заявку. Ключевые темы конференции — CV, RecSys, MLOps, NLP, Speech и Analytics. После подачи программный комитет рассмотрит заявки и примет решение об участии каждого претендента. 🔹 Сбор заявок завершится 13 июля. Реклама. ООО "Яндекс", ИНН 7736207543.