Совет по использованию инструментов Chrome Dev Tools 💡

Возможно, вы не знаете об этой альтернативе console.log() для отладки 🤩.

👉 @frontend_1

Совет по CSS 💡

Простое создание градиентной закругленной рамки с помощью CSS 🔥

👉 @frontend_1

Если ваш фронтендер перестал бояться IE6, покажите ему SmartTV

В декабре 2021 года под новогодние праздники в приложении Кинопоиска для SmartTV появился раздел с Яндекс Музыкой. Он позволил пользователям на телевизорах открывать новые для себя треки в Моей волне, включать популярные подборки и слушать собственную коллекцию на телевизорах.

При создании этого раздела я впервые столкнулась с миром SmartTV. Не каждый фронтендер встречает в своей практике подобные задачи, даже несмотря на то, что сейчас разработка под ТВ довольно популярна.

Меня зовут Лена и я фронтенд-разработчик Яндекс Музыки. В этой статье я расскажу про особенности работы SmartTV и разработки под них на примере свежей фичи, которую мы назвали Время клипов. Теперь в приложении вы можете посмотреть клипы любимых артистов и открывать для себя новых исполнителей, которые подходят вам по настроению.

Под катом обсудим ключевые отличия работы фронтенда над вебом и SmartTV, поговорим про оптимизацию и вёрстку и посмотрим на фотографии множества пультов (без пакетиков).

https://habr.com/ru/companies/yandex/articles/743104/

👉 @frontend_1

⚛️ Совет по React

Отложите создание non-primitive значений, если вы используете их в массиве зависимостей

✍️ @React_lib

Совет по использованию инструментов для разработчиков Chrome 💡

Легко определить, какой шрифт используется в тексте веб-страницы, используя инструменты разработчика Chrome 🤩

👉 @frontend_1

Типы утилит Typescript, которые вы должны знать

Здравствуйте, сегодня в этой статье мы рассмотрим некоторые полезные и важные утилитарные типы в Typescript, которые могут облегчить вашу жизнь.

Утилитарные типы в Typescript - это некоторые предопределенные общие типы, которые могут быть использованы для манипулирования или создания других новых типов. Эти типы доступны глобально во всех проектах Typescript, поэтому для их использования не нужно добавлять никаких зависимостей.

https://dev.to/arafat4693/typescript-utility-types-that-you-must-know-4m6k

👉 @frontend_1

Совет по CSS 💡

Упрощение больших CSS-селекторов с помощью функции псевдокласса :where() 🤩

👉 @frontend_1

Web API для Angular

Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!

https://habr.com/ru/companies/tinkoff/articles/750788/

👉 @frontend_1

Анимированный SVG-логотип

Впервые я увидел такую анимацию штрихов в SVG в Material Line Icons Вячеслава Трушкина. Это было круто, но я никогда не задумывался о том, чтобы сделать что-то свое, пока не увидел баннер Му-Ан Чиоу на ее сайте. Я вдруг почувствовал, что тоже хочу быть крутым парнем!

https://antfu.me/posts/animated-svg-logo

👉 @frontend_1

Совет по CSS 💡

Я недавно обнаружил, что мы можем изменять размеры любого блочного элемента, а не только textarea!

👉 @frontend_1

Card :hover spotlight effect with background-attachment 🤙

Используем background-attachment, чтобы прикрепить фон к области просмотра

https://codepen.io/jh3y/pen/RwqZNKa

👉 @frontend_1

Совет по использованию инструментов Chrome Dev Tools 💡

Возможно, вы не знаете об этой очень полезной и экономящей время технике отладки 🤩.

👉 @frontend_1

Сокровища HTML: 7 тегов, которые упростят вам жизнь

В этой статье я расскажу про 7 HTML-тегов, которые, возможно, вы еще не открыли для себя. Мы посмотрим, как они работают и насколько поддерживаются современными браузерами. Поехали!

<sub> / <sup>

Это теги для добавления текста с надстрочным и подстрочным индексами.

Иногда нам нужно выделить символы или цифры, которые находятся выше или ниже базовой линии текста. Например, в химии для обозначения химических формул, в математике для записи степеней и индексов, в музыке для обозначения аккордов, или просто для оформления сносок и сокращений. Все это можно легко достичь с помощью тегов <sup> и <sub>.

https://habr.com/ru/articles/774112/

👉 @frontend_1

HTML input types сильно различаются в зависимости от значения атрибута type, который вы используете 👨‍💻.

Ознакомьтесь с этой шпаргалкой на будущее 🚀

👉 @frontend_1