JetBrains выпустила обновление WebStorm 2023.1. Теперь IDE поддерживает работу с фреймворком Astro, Tailwind CSS и с TypeScript в Vue-шаблонах. Новая версия среды разработки уже доступна на сайте компании и в JetBrains Toolbox. Читать далее
Подробнее
Периодически я сталкиваюсь с проблемой - не хочу ставить лишний класс элементу внутри различных кнопок, ссылок и label-ов. Зачастую это текст, который нужно подсветить или галочка чекбокса или маленькая иконка. В решении этой проблемы мне обычно помогают необычные операторы CSS > + и ~ Читать далее
Подробнее![[Перевод] Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом](https://habrastorage.org/webt/in/r4/qu/inr4quketif7lohmnby_zln2lt0.png)
Современная сфера веб-разработки пестрит всевозможными технологиями и инструментами, среди которых новичок может легко растеряться. Статья посвящена общему обзору принципов фронтенд- и бэкенд-разработки, а также знакомит начинающих с наиболее актуальными инструментами и навыками, которые им потребуются для успешного продвижения по карьерному пути. Читать дальше →
Подробнее![[Перевод] CSS сolor-сontrast(): пошаговое руководство](https://habrastorage.org/getpro/habr/post_images/274/5f5/bf5/2745f5bf5e937166b62269f323afa7f5.png)
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его. Функция color-contrast() используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с…
Подробнее![[Перевод] Основы веба, которые должен знать начинающий разработчик](https://habrastorage.org/webt/yh/9k/f-/yh9kf-zn8jw0cftgqbwtxzs_dzo.jpeg)
В этом посте я объясню, как работает Интернет. Мы ответим на вопросы наподобие «Как браузер находит файл HTML для запрошенной веб-страницы?», «Как файл HTML превращается в интерфейс пользователя?», «Что можно сделать, чтобы ускорить этот процесс?», «Как устанавливается и поддерживается связь с сервером?», а также рассмотрим следующие концепции: Клиент-серверную модель Жизненный цикл запроса веб-страницы Hypertext Transfer Protocol Как браузеры рендерят контент Читать дальше →
Подробнее
Мне нравится, когда люди делятся тем, что они хотят видеть в CSS. За последние несколько недель я прочитал два потрясающих списка желаний Дэйва Руперта и Эрика Мейера. Я подумал, почему бы мне не поделиться с вами тем, что я хотел бы однажды увидеть в CSS. Читать далее
Подробнее![[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году](https://habrastorage.org/webt/5m/hl/1l/5mhl1lycb7yyoxwloflsrzzk578.png)
Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов. Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки. Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода.
Подробнее
Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них. Но для начала… ещё одна статья о градиентных тенях? Серьёзно? Читать дальше →
Подробнее
Сделать сайт удобным и понятным для посетителей, а также оптимизированным для поисковых систем — задача каждого SEO‑специалиста. Одним из ключевых элементов, влияющих на эти факторы, является структура сайта. Сегодня мы поговорим о том, как сделать структуру сайта по SILO методу, чтобы улучшить его позиции в поисковых системах и увеличить трафик. Читать далее
Подробнее![[Перевод] Прокачиваем навыки CSS с помощью селектора :has()](https://habrastorage.org/webt/6l/si/tk/6lsitknanqlqucpeyu6efsothve.png)
Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию нового CSS-селектора :has(). :has() предоставляет возможность "заглядывать вперед" с помощью CSS и стилизовать родительский элемент (предка). Этот селектор может быть легко расширен для стилизации одного или нескольких дочерних элементов (потомков). Регистрация состояний или позиций элемента позволяет стилизовать почти любую комбинацию элементов как уникальных…
Подробнее![[Перевод] CSS-селектор :has() и междустрочные интервалы в длинных текстах](https://habrastorage.org/getpro/habr/post_images/c08/9b4/e65/c089b4e652c15967550b753561c5f518.png)
Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д. Читать дальше →
Подробнее![[Перевод] Топ рекомендаций по Core Web Vitals на 2023 год](https://habrastorage.org/webt/65/fk/lb/65fklbb2f2f-gr0shnqx_11kd_s.png)
Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, представляющей собой коллекцию лучших практик, которые по мнению команды Chrome DevRel являются наиболее эффективными способами улучшения показателей Core Web Vitals. Core Web Vitals — это часть метрик Web Vitals, используемых для оценки веб-страниц и включенных во все инструменты Google. Владельцы сайтов должны учитывать эти метрики. Каждый показатель Core Web Vitals представляет собой отдельный…
Подробнее