Подборка бесплатных библиотек иконок для ваших проектов

Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:

Iconoir — коллекция из более чем 1500 иконок, поддерживающая работу с React, Vue и Flutter. Благодаря SVG и JSX легко адаптируется для разных платформ.

Phosphor Icons — библиотека с более чем 9000 иконок в разных стилях и весах. Pixel-perfect дизайн делает её подходящей для профессиональных решений.

Material Icons — классика Material Design с 2100+ иконками в разных форматах и стилях. Подходит для универсальных и лаконичных интерфейсов.

Bootstrap Icons — официальная библиотека Bootstrap с 2000+ иконками. Универсальный выбор благодаря поддержке SVG, PNG и других форматов.

Feather Icons — минималистичная коллекция из 280+ иконок, созданная для современных интерфейсов. Простота и элегантность — её главные черты.

Octicons — иконки от GitHub с простым дизайном, которые подходят для интерфейсов разработчиков. Отличный выбор для веб-платформ.

Heroicons — набор из 450+ иконок в двух стилях: контурном и с заливкой. Чистый и современный внешний вид гарантирует стильный дизайн.

Lineicons — современная библиотека с 500+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.


Какую ещё библиотеку нам стоило включить в подборку?

#иконки #инструменты

Саморисующиеся фигуры на CSS

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

Всё, что вам требуется, добавить в код SVG к строку pathLength="1", а затем прописать следующие стили в CSS:

path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}

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

Подробнее о способе можно почитать здесь.

#css #лайфхак

Яндекс Практикум обучает аналитиков данных

Если вы хотите перезапустить карьеру без отрыва от привычной жизни, курс с 75% практики идеально подойдёт. Вас ждут 4+ больших проекта, диплом гособразца, подарки, а также помощь с поиском работы.

А ещё у ребят идет черная пятница: пройдите первую учебную тему курса до 30 ноября и получите скидку 20% на обучение.

Станьте частью востребованной профессии!

Начать учиться

Это #партнёрский пост

Буква D в IDE означает Dramatic

Простыми словами: Что такое Virtual DOM в React

Если вы изучаете React, наверняка слышали о Virtual DOM, который делает React быстрым. Давайте разберёмся, как это работает.

Что такое DOM?

DOM — это модель страницы, где каждый элемент HTML представлен как объект в дереве:

<div>
  <h1>Hello!</h1>
  <p>React is awesome</p>
</div>

В DOM:

div
├── h1
└── p

Когда вы изменяете, например, текст в <p>, браузер обновляет весь DOM, что может быть медленно для больших страниц.

Что такое Virtual DOM

Virtual DOM — это копия реального DOM, которая существует в памяти.

Как это решает проблему обновления DOM для больших страниц:
— React сначала обновляет Virtual DOM.
— Затем сравнивает новый Virtual DOM с предыдущей версией (diffing).
— После этого изменяет только нужные части реального DOM, а не всё дерево.

Это намного быстрее, чем манипуляции с реальным DOM.

Пример Virtual DOM в деле

function App() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Счётчик: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
    </div>
  );
}

Когда изменяется count, React обновляет только текст в <h1>, остальные элементы (<div> и <button>) остаются нетронутыми.

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

— Быстрая работа: только новые или изменённые части DOM обновляются.
— Простота кода: больше фокус на логике, меньше на оптимизации.
— Сложные интерфейсы становятся лёгкими: React справляется даже с большими приложениями.

Подведём итог

Virtual DOM — это умная копия DOM, которая работает в памяти, сравнивает изменения и обновляет только то, что нужно. Благодаря этому React становится быстрым, простым и мощным.

Напишите в комментариях понравился ли вам формат и про что ещё хотели бы узнать.

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

Верстка сайта по макету из Figma без Dev Mode в бесплатной версии

Как вы знаете, бесплатно сейчас работать в DEV-режиме фигмы уже нельзя. Но если денег на подписку у вас нет или просто жалко, а макет уже ждёт, то всё-таки кое-что можно сделать.

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

#видео #урок #figma #фронтенд

Эффект матового стекла для веба

Разработчик, участвовавший в создании игр Forza, так вдохновился их элементами дизайна, что решил повторить их с помощью HTML. Конечно, без CSS тут тоже не обошлось, а где-то даже потребовался JS, но результат получился отличным.

Своим опытом и готовым проектом автор поделился в статье.

#html #css #ui

Портируем олдскульную головоломку в веб с использованием LLM и Midjourney для бати

Помните этот старый маджонг с покемонами? Я вот в своё время вдоволь наигрался в неё.

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

#gamedev

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css

Скрытые возможности элемента input

Большинство собратьев элемента input вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента input может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид.

Элемент input отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье описали не только различные типы input, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях: https://habr.com/ru/companies/ruvds/articles/785690/

#html #лучшиепрактики

Создаём анимацию при скролле на HTML, CSS и JS

Анимация при прокрутке (скролле) страницы может быть очень эффектной, а иногда и полезной для вашего сайта. В этом видео вы пошагово научитесь анимировать элементы при прокрутке страницы без тяжелых библиотек, используя только HTML, CSS и JavaScript.

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

10 инструментов для облегчения backend-разработки

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

Сегодня вы познакомитесь с 10 инструментами, которые сделают backend-разработку проще. Среди них:

— Encore. Фреймворк для TypeScript и Go, облегчающий создание надежных и типобезопасных приложений.
— Cursor. Форк VSCode с ИИ-функциями для программирования и генерации кода.
— Datadog. Сервис мониторинга инфраструктуры для любого стека и масштабируемости.
— Copycat. Генератор детерминированных фейковых данных для тестирования API.
— Infisical. Платформа для управления секретами с централизованным хранением данных.

Ознакомиться со всем список и узнать подробности можно по ссылке.

#бэкенд

SSE vs WebSocket: разобрались, что где лучше работает

В вебе есть множество способов обмена данными. Но наиболее популярные из них сегодня — SSE и WebSocket. При этом у них есть кардинальные различия. Например, SSE это односторонняя технология для общения сервера с клиентом, в то время как WebSocket позволяет взаимодействовать им в двухстороннем режиме.

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

#sse #websocket

Создатель JSON раскритиковал использование ИИ

Дуглас Крокфорд на своей странице в LinkedIn жёстко прошёлся по тому, как человечество использует искусственный интеллект сегодня.

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

Также у гуру JavaScript есть претензии к качеству материалов, по которым ИИ учится. Часто это неправильный или токсичный контент.

Более подробно можно прочитать здесь. А вы согласны с ним?

upd. В комментарии добавил «точку зрения» ChatGPT по этому вопросу.

#новости

Давайте голосовать, подсказывайте!

Помните, мы обещали, что автор лучшей статьи месяца получит наш мерч? Теперь пришло время выбрать победителя! Мы определили три лучших материала за ноябрь, но решать вам.

Здесь можно с ними ознакомиться, а следующим постом будет опрос:
1) Django vs FastAPI в 2025 году: какой фреймворк выбрать?
2) Гайд: как настроить API для распознавания документов за 30 минут
3) Как пополнить кошелёк Steam в России в 2024 году

Автор статьи, набравшей больше всего голосов, получит наш фирменный мерч. Голосуйте — завтра подведём итоги!

#конкурс #tproger

Берите на заметку. Особенно актуально на Новый Год

Как создать свой шрифт прямо в браузере

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

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

А ещё его также можно установить как PWA на ваш компьютер. Пробуем тут: typlr.app

#инструменты #фронтенд #дизайн

Используем JS для поиска ликвидных облигаций

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

Чтобы вы могли сделать это быстрее и проще, автор этого материала подготовил специальный скрипт, работающий с API Московской биржи, который находит такие активы. Подробнее по ссылке.

#javascript

Состоялся релиз React 19

Адепты React, ликуйте! Новая версия принесла множество полезных улучшений:

— улучшения серверных компонентов позволяют уменьшить время первоначальной загрузки страницы, переносимость кода и SEO;
— новые директивы, позволяющие отслеживать, где выполняется код — на сервере или на клиенте;
— функции-операции, заменяющие собой обработчики событий;
— три новых хука;
— обновление в API и многое другое.

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

#новости #react