Совет по 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

Какие неочевидные темы вспомнить перед собеседованием на Frontend разработчика

С каждым годом собеседования становятся все сложнее и сложнее, а количество вопросов, которые могут спросить, не укладывается в голове.

Именно поэтому я решил создать небольшой чеклист, в котором собрал темы, по которым задавали вопросы либо мне, либо моим друзьям задавали на собеседованиях на Frontend разработчика. Эти темы почти не попадаются в стандартных списках по подготовке к собеседованиям, поэтому я решил сделать свой.

Приложу ссылочки ко всем топикам, про которые буду рассказывать, так что вы сможете полистать их за день перед собеседованием и освежить в памяти знания. Даже если вы не готовитесь к собеседованиям, вы можете пробежаться по ним, и попытаться найти что-то интересное для себя.

Я разбил на 4 основных топика: HTML, CSS, JS, общие вопросы по Frontend/Программированию.

Ну что, поехали!

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

👉 @frontend_1

Использование CSS Grid и grid-template-areas для создания отзывчивого двухколоночного макета 🧑‍💻🚀

👉 @frontend_1

Понимание SVG-путей

Если вы когда-нибудь смотрели код SVG для иконок, то могли заметить, что они обычно состоят из множества элементов path, каждый из которых имеет загадочный атрибут d.

https://www.nan.fyi/svg-paths

👉 @frontend_1

Как появились веб-пуши Apple в Тинькофф

Всем привет! Мы — архитектор разработки публичных веб-приложений Борис и разработчик системы-шлюза отправки нотификаций Данила. Расскажем о том, как создавались веб-пуши iOS в Тинькофф, как их настраивали и с какими проблемами столкнулись в процессе разработки.

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

👉 @frontend_1

Совет по CSS 💡

Узнайте, как легко можно использовать видео в качестве фона 🤩👇

👉 @frontend_1