CSS-вишлист 2025

Что бы вы добавили в CSS в этом году? Каждый год язык обрастает новыми возможностями и этот не исключение. Мы не знаем наверняка, что именно попадёт в релизную версию, но можем с вами пофантазировать, как это сделали ребята в этой статье. Они предлагают добавить if(), новые атрибуты в link() и многое другое.ъ

Со всеми идеями можете ознакомиться в материале, а пока напишите в комментариях, чего вам не хватает в CSS сегодня.

#css

Как сделать анимацию разными способами

Во фронтенде существует куча способов создать анимации: HTML + CSS, Canvas, SVG, WebP, Lottie и так далее. Каждый из вариантов даёт различные преимущества.

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

#фронтенд #css #canvas

Помоги сделать Tproger интереснее 

Друзья, мы ищем тех, кто:
— Пишет код (и иногда испытывают к нему почти родственные чувства).
— Работает с данными, инфраструктурой или тестированием (и гордится этим).
— Управляет проектами, командой (или хотя бы котом).
— Просто интересуется IT.

Сейчас нам очень важно ваше мнение про Tproger и как сделать его лучше. Займёт не более 2-3 минут, если ни на что не отвлекаться.

Ссылка на анкету: https://tprg.ru/zmo2

#tproger

Это не его закрыли с сеньорами на одном проекте. Это их закрыли с ним.

Как парсить сайты в обход защиты от парсинга?

На некоторых сайтах работает защита от парсинга и работы ботов с ним. Но есть способы, которые позволяют обойти её и всё-таки добраться до содержимного веб-страниц.

На Хабре есть неплохой гайд. Делимся с вами: https://habr.com/ru/post/710982/

#linux #html #javascript #сsharp

Крутая анимация перехода с перспективой при скролле

Отличный пример создания красивого перехода. Эффект достигается за счёт увеличения изображений и грамотной работы со слоями. Сделан с помощью библиотеки GSAP.

Посмотреть код можно тут: https://codepen.io/GreenSock/pen/YzbPYMx

#codepen

Будущее микросервисов: уйдем ли мы к монолитам 2.0

Споры об архитектуре не утихают и, наверное, не утихнут никогда. Некоторые компании, начавшие использовать микросервисы, сегодня переоценивают сложность подхода и возвращаются к монолитам, но уже с использованием более современных инструментов. Другие же, только сейчас внедряют микросервисы в свои проекты.

Автор же этой статьи предлагает не сравнивать их друг с другом, начиная очередной спор, а рассмотреть концепцию монолитов 2.0, узнать, что за ней стоит и почему компании возвращаются к упрощению.

#микросервисы

Пишем свой движок для Flexbox-вёрстки

Предлагаем вам написать свой движок для компоновки элементов с нуля на TypeScript. В результате у вас получится аналог Yoga или Stretch, который вы сможете использовать в своих проектах.

Если заинтересовались, то давайте без лишних слов приступим к делу. Подробности по ссылке:

https://tchayen.com/how-to-write-a-flexbox-layout-engine

#фронтенд #typescript #css

Как работает псевдокласс :has() в CSS

Псевдокласс :has — это мощный инструмент в CSS, который позволяет выбирать элементы, основываясь на их содержимом или дочерних элементах. Другими словами, он даёт возможность стилизовать элементы на основе контекста внутри них, чего раньше невозможно было сделать только средствами CSS.

Как это работает?

element:has(selector) выбирает элемент, который содержит определённого потомка или соответствует указанному селектору.

/* Выбрать карточки, содержащие кнопку */
.card:has(button) {
    border: 2px solid blue;
}

Здесь будут выделены только те .card, внутри которых есть <button>.

Зачем он нужен?

1. Работа с родительскими элементами. Например, стилизовать <div>, если внутри него есть конкретный элемент.

2. Условное форматирование. Например, вы можете выбрать контейнеры, в которых есть определённое состояние, например, отмеченный чекбокс.

/* Стилизовать родительский div, если внутри есть отмеченный чекбокс */
div:has(input[type="checkbox"]:checked) {
    background-color: lightgreen;
}

#простымисловами #css

Эти ребята явно шарят в IT, не так ли?

Пример инди-стартапа для чтения книг в оригинале. Что думаете?

Разработчик поделился своим проектом, который помогает читать книги в оригинале даже тем, кто ещё недостаточно знает язык. В отличие от существующих решений, его приложение не использует машинный перевод или заранее согласованные переводы книг. Вместо этого оно с помощью нейросетей анализирует оригинал и перевод, сопоставляет их и предоставляет результат с учётом абзацев, пунктуаций и прочего.

Посмотреть на то, что у него получилось и узнать, с какими сложностями он столкнулся можно в его статье.

#петпроект #веб

Создаём свой индикатор прокрутки на чистом JS + SVG-анимация окружности

Индикатор прогресса чтения статьи сегодня является популярным решением на многих сайтах. В этом видео автор показал, как реализовать такой элемент, а ещё как сделать аналогичный индикатор, но в форме кольца:

https://youtu.be/ScadOMC4Bko

#видео #фронтенд

Перестаньте молиться на принципы S.O.L.I.D.

В мире разработки программного обеспечения существует множество принципов и практик, которые принимаются как данность и редко подвергаются критическому анализу. Это касается и принципов SOLID, которым посвящено огромное количество статей, где каждый автор истолковывает их по-своему.

В связи с этим возникает парадокс: принципы SOLID крайне важны, но каждый понимает их по-своему. Получается, что это уже не какая-то одна концепция, а множество разных под одним названием. Автор сегодняшней статьи предлагает пересмотреть отношение к этим принципам, взглянуть на них свяжим взглядом и, возможно, даже отказать от них. Подробнее: https://habr.com/ru/articles/874584/

#solid

Стильная анимация кнопки поиска для вашего сайта

Сделана с помощью классического стека HTML + CSS (SCSS) + JS, поэтому может быть использована вами в любом проекте без установки дополнительных библиотек.

Посмотреть код можно на странице проекта.

#codepen #фронтенд

HTTP-запросы: GET, POST и другие

HTTP-запросы — основа взаимодействия между клиентской и серверной частями веб-приложений. В этой статье мы рассказали, как работать с HTTP-запросами в веб-разработке на Node.js, Python и PHP, а также привели примеры на JavaScript с использованием fetch и axios.

#http #api

Разработчик смотрит, какой дизайн предлагает сверстать дизайнер.

Accessibility для всех: Как удержать пользователя в приложении с помощью доступности

Accessibility — это свойства приложения, которые дают возможность пользоваться им людям с ограниченными возможностями. Например, для пожилых или юзеров с частичной потерей зрения. Делать приложение доступным не только гуманно, но и выгодно.

Если вашим сайтом пользоваться сложно, вы теряете деньги и постоянных клиентов. Давайте разберёмся, как не допустить убытков и при этом сделать своё приложение качественнее и удобнее. Подробности в статье: https://tproger.ru/articles/kak-uderzhat-polzovatelya-v-prilozhenii-s-pomoshhyu-dostupnosti

В какую сторону развивается Vue и есть ли ему современные альтернативы

Vue.js входит в топ наиболее популярных инструментов веб-разработки. В числе основных плюсов — доступность, простая архитектура, высокая производительность и гибкие настройки.

Но ему уже более 10 лет. А для IT-продукта это большой срок, за который появились другие проекты. В этой статье мы решили разобраться, есть ли альтернативы у фреймворка, каковы его особенности и преимущества, и как использовать Vue.js с максимальной эффективностью.

#vue

Что такое innerHTML и почему иногда его лучше не использовать

innerHTML — это встроенное свойство в JavaScript, которое позволяет работать с содержимым HTML-элементов. Проще говоря, с его помощью можно получить или изменить всё, что находится внутри HTML-тега. Это включает текст, другие теги, атрибуты и так далее.

Пример:

// Берём элемент <div> со страницы
const div = document.getElementById("example");

// Устанавливаем его содержимое
div.innerHTML = "<p>Привет, я новый текст!</p>";

Теперь в <div id="example"> появится <p>Привет, я новый текст!</p>. Всё, что ранее было внутри тега <div> (если что-то было), заменяется.

Чем удобен innerHTML

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

const list = ["яблоко", "банан", "апельсин"];

document.getElementById("list").innerHTML = list.map(item => `<li>${item}</li>`).join("");

После выполнения в элементе с id "list" появится список:

<ul>

  <li>яблоко</li>

  <li>банан</li>

  <li>апельсин</li>

</ul>

Почему же тогда в некоторых случаях лучше НЕ использовать innerHTML?

1. Уязвимость для XSS-атак. При работе с innerHTML вы буквально вставляете HTML-код внутрь страницы. Если этот код генерируется на основе сторонних данных (например, от пользователя или с сервера), есть риск внедрения вредоносного кода.

2. Удаление старого содержимого. innerHTML полностью перезаписывает всё, что было внутри элемента. Если в элементе были установлены события (например, через addEventListener), они будут сброшены.

3. Низкая производительность на больших объёмах данных. Если нужно добавлять или изменять много элементов, innerHTML может стать неэффективным. Каждый раз он полностью пересоздаёт внутреннюю структуру элемента, даже если изменения минимальны.

Чем же тогда заменить её?

1. Используйте textContent, если нужен только текст. Если нужно только поменять текст внутри элемента, а HTML не нужен, то textContent — ваш друг. Он безопасен, потому что не интерпретирует HTML.

2. Используйте insertAdjacentHTML, чтобы добавить HTML без перезаписи контента. insertAdjacentHTML позволяет вставлять HTML в конкретное место относительно элемента, не перезаписывая всё содержимое.

3. Создавайте элементы через DOM-методы для сложной логики. Вместо innerHTML можно использовать методы вроде document.createElement и appendChild.

Если всё же решитесь использовать innerHTML, убедитесь, что данные, которые вы вставляете, безопасны и тщательно проверены.

#простымисловами #html #javascript

Использование async и defer для управления скриптами

В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать.

Подробности.

#javascript #html

Полезные материалы по веб-разработке

Энтузиаст собрал в одном месте огромную подборку материалов по HTML, CSS, JavaScript, React, а также сервисы и программы, которые пригодятся веб-разработчику. Сохраняйте в закладки, чтобы не потерять.

#подборка