Совет по использованию инструментов для разработчиков 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

Какие неочевидные темы вспомнить перед собеседованием на 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