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

Читать полностью…

Саморисующиеся фигуры на 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 #лайфхак

Читать полностью…

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

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

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+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.


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

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

Читать полностью…

Делаем админскую панель со статистикой

Это большой курс, на котором вы научитесь создавать дашборд с анимацией, чартами и таблицами.

Фронтенд будет разрабатываться на Next.js / React. Стили реализуем с использованием Tailwind CSS. А также добавим типизацию с помощью TypeScript. Бэкенд А ещё поработаем с chart.js и framer motion.

Взято отсюда.

#курс #туториал

Читать полностью…

Что происходит, когда вы вводите адрес сайта и нажимаете Enter

Несмотря на фундаментальность вопроса, в нем ошибаются или не могут дать точного ответа даже Senior-разработчкии. Что уж говорить о джунах.

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

#веб #сеть

Читать полностью…

Сокращения JavaScript экономящие время

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

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

https://www.dev-notes.ru/articles/javascript/ten-javascript-shortcuts-to-save-hours-of-coding/

#javascript

Читать полностью…

CSR, SSG, SSR — виды рендеринга приложений на примерах

Сегодня используется три основных способа рендеринга страницы: CSR — рендеринг на стороне клиента, SSG — генерация статического сайта и, наконец, SSR — рендеринг на стороне сервера. У каждого из этих подходов есть свои плюсы, минусы и важные особенности.

В статье автор рассказал и показал их основные различия, кейсы использования и практические примеры:

https://habr.com/ru/companies/alfa/articles/725626/

#фронтенд

Читать полностью…

Django или FastAPI: какой фреймворк выбрать в 2025 году

Django и FastAPI — одни из самых популярных фреймворков Python. На какой стоит обращать внимание сейчас при начале работы с новым проектом?

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

https://tproger.ru/articles/django-vs-fastapi-v-2025-godu--kakoj-frejmvork-vybrat-

#бэкенд #python #django #fastapi

Читать полностью…

Топ JavaScript-фреймворков для быстрой разработки в 2025

Для JS существует огромное количество фреймворков. Возможно, пока вы читаете этот текст, вышел ещё один новый фреймворк.

Но как понять какие стоят внимания, какие — нет? Какие стоит использовать сегодня, а какие уже устарели?

Мы составили подборку JavaScript-фреймворков, которые достойны вашего внимания и точно будут актуальны в следующем году. Переходите по ссылке и выбирайте свой.

#javascript #подборка

Читать полностью…

Как работает всплытие в JavaScript

Представьте себе следующее: у вас есть коробка (родительский элемент), и внутри неё находится ещё одна меньшая коробка (дочерний элемент). Когда вы касаетесь (или кликаете) меньшей коробки, ваше прикосновение не только ощущается на меньшей коробке, но и как бы «передаётся» на большую коробку.

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

Вот так это может выглядеть в реальном коде:

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Большая коробка (Parent Div)
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Меньшая коробка (Child Div)
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', function(event) {
      alert('Клик по большой коробке!');
    });

    document.getElementById('child').addEventListener('click', function(event) {
      alert('Клик по меньшей коробке!');
    });
  </script>
</body>
</html>

Для настройки логики в JS также предусмотрена остановка всплытия

Если вы не хотите, чтобы событие поднималось вверх, можно его остановить с помощью event.stopPropagation(). Например, добавив это в код клика по меньшей коробке, вы сможете предотвратить срабатывание события для большей коробки.

Когда используется всплытие?

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

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

Читать полностью…

Микрофронтенды: build time vs runtime

Недавно прошла конференция FrontendConf 2024. На ней было много интересных докладов и это один из них.

Александр Гончаров поделился своим опытом и рассказал почему микрофронтенд — логичное архитектурное развитие индустрии, а также какие принципиальные различия и сходства подходов build time и runtime.

Мы для вас принесли доклад из YouTube сюда, чтобы у вас не возникало проблем с загрузкой.

#доклад #микрофронтенд

Читать полностью…

Зачем нужны брокеры типа Apache Kafka?

Чтобы контролировать обмен сообщениями между разными компонентами в сложных распределённых IT-системах.

Apache Kafka предназначен для обработки потоков данных в режиме реального времени. Его можно сравнить с почтой — одни сервисы передают туда сообщения-письма, а другие — получают.

На курсе «Apache Kafka для разработки и архитектуры» от Яндекс Практикума за 3 месяца вы освоите навыки, которые помогут работать с более сложными продуктами, и сможете повысить свой уровень как специалист. Этот курс не про базу работы с Apache Kafka, а про комплексное погружение в инструмент.

Главное — никаких давно снятых видео и длинных лекций. Теория и практика проходят в интерактивном учебнике в удобном темпе без жёстких дедлайнов! А воркшопы с опытными разработчиками можно смотреть в записи, если вы не успеваете их посетить.

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

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

Читать полностью…

Как разобрать HTML в JavaScript

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

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

#javascript #html #парсинг

Читать полностью…

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

Сохраняйте, чтобы не потерять!

#шпаргалка #css

Читать полностью…

Для чего используется stopPropagation()

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

При клике по вложенному контейнеру в консоль выводится сообщение «Внутренний контейнер». Если убрать event.stopPropagation(), то при клике по вложенному контейнеру, в консоль будут выведены оба сообщения.

#основы

Читать полностью…

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

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

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

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

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

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

Читать полностью…

Новый уровень продуктивной разработки: добро пожаловать на платформу GitVerse 

На платформе для работы с исходным кодом GitVerse можно легко и удобно организовать разработку любых проектов: писать и проверять код, автоматизировать CI/CD-процессы, общаться с единомышленниками и стать частью open source сообщества.

Что еще могут пользователи GitVerse:
– переносить проекты с других git-площадок в один клик;
– размещать открытые и приватные репозитории, работать самостоятельно и в командах;
– управлять проектами с помощью удобных досок и карточек, назначать роли, ревьюеров и делать все процессы прозрачными;
– делегировать рутинные задачи AI-ассистенту GigaCode, чтобы посвятить время по-настоящему интересным задачам!

Регистрируйтесь на платформе GitVerse и повышайте эффективность разработки!

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

Читать полностью…

Frontend Community Екатеринбурга — залетайте на митап в Технохаб

Когда: 3 декабря, 18:00
Офлайн: Технохаб Сбера, ул. Розы Люксембург, 56а, Екатеринбург

О чем поговорим:
 
— Программы, которые пишут программы: как мы внедрили скаффолдинг во фронтенде
Александр Абрамов, Сбер, расскажет, как скаффолдинг помогает снизить порог входа в проект, снизить bus-factor и повысить консистентность кода.

— Typescript на максималках: как сделать код более гибким и надёжным
Константин Логиновских, Cloud.ru, поделится секретами, как повысить гибкость и надежность кода.

— Open Talk: «Назад в будущее — новый взгляд на веб»
ИТ-лидеры Сбера обсудят, что нужно веб-разработке, чтобы быть полноценной альтернативой нативным решениям, какие веб-приложения уже сегодня выходят за рамки классических браузеров и, конечно, в чем сила веба на сегодняшний день.

А еще вас ждут: 
фуршет, подарки и много общения с топовыми экспертами — не упустите шанс и приходите за новыми идеями и вдохновением!

Регистрация на митап и детали программы

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

Читать полностью…

10 признаков плохого кода

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

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

Подробности в статье.

#советы

Читать полностью…

Учимся работать с DOM в JS

Урок для начинающих, который поможет вам разобраться, как работать с элементами DOM-дерева в JavaScript. За полчаса вы пройдёте 26 упражнений, где вы научитесь:

— создавать и удалять элементы на нашей странице;
— динамически создавать HTML-разметку;
— добавлять классы к элементам;
— использовать обработчики событий на созданных элементах
и многому другому.

Смотреть можно здесь или на YouTube.

#видео #javascript #начинающим

Читать полностью…

Коллекция лоадеров и скелетонов для вашего проекта

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

Все они выполнены на HTML и CSS с применением препроцессоров. Так что всё, что вам нужно сделать — скопировать их в свой проект.

#html #css #лоадер

Читать полностью…

Небольшая викторина на выходных, чтобы размять мозги. Варианты ответа ниже.

#викторина #javascript

Читать полностью…

Неизвестно полезный CSS

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

В этой подборке про вертикальный текст, clip-path, контрастность текста и не только.

Кстати, это уже 6 подборка советов, остальные вы найдёте в конце статьи.

#css

Читать полностью…

Чёрная пятница — отличный повод инвестировать в развитие своей карьеры с максимальной выгодой
 
Как не захламлять свой дом ненужными вещами с распродаж? Вкладываться в себя. Знания — лучшая инвестиция, которая поможет вам увеличить доход и купить всё, что вы действительно хотите.
 
В Нетологии вы можете освоить новую профессию или получить навыки для роста в карьере. Только в ноябре любой курс доступен со скидкой до –40%, но и это ещё не всё — на сайте вы найдёте промокод на дополнительную скидку на 10, 15, 20 тысяч рублей. А при единой оплате сможете получить ещё -5%.
 
Двойные скидки для максимальной выгоды. Распродажа продлится с 15 по 24 ноября.

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

Читать полностью…

Наглеть или вести себя поскромнее?

❤️/🗿

Читать полностью…

Как подросток превратил Twitter в личную машину для кражи денег?

Представьте: аккаунты Илона Маска, Билла Гейтса, Джеффа Безоса и даже Apple начинают публиковать странные твиты про биткоины.

Мир в шоке, миллионы людей в недоумении, а за всем этим стоит... 17-летний парень.

Как он провернул крупнейший взлом соцсетей в истории? Кто ему помогал? И почему даже опытные хакеры аплодировали этой дерзости?

В новом выпуске подкаста «АЙТИ КРАЙМ» мы разбираем взлом, который поставил под удар доверие к крупнейшей платформе и заставил весь мир задуматься: а насколько безопасны наши любимые соцсети?

Слушайте и смотрите новый выпуск:

Яндекс.Музыка
Apple Music
Spotify
YouTube
Telegram

#подкаст #айтикрайм

Читать полностью…

Позиционируем плавающие элементы без лишних сложностей

В этом нам поможет JavaScript-библиотека Floating UI. Она не только упрощает размещение элементов в нестандартном месте, но и помогает добавлять им интерактивность.

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

Сохраняйте себе в библиотеку в закладки, чтобы не потерять.

#библиотека #javascript

Читать полностью…

Почта на прокачку: как повысить защиту Microsoft Exchange и не слить чувствительные данные в сеть

Когда: 27 ноября, 11:00 по Москве
Регистрируйтесь на вебинар!

SuperHardio time*! Чтобы узнать, как захардкорить самое ценное и построить настоящий лабиринт для хакера, присоединяйтесь к новому образовательному проекту от ИТ-экспертов Positive Technologies.   

В программе:

— Что не так с типовой настройкой Microsoft Exchange 2019.
— Топ-3 сценария уязвимостей.
— Как ИТ-специалисту справиться с бременем ответственности за корректную работу почтового сервиса.
— Обсуждение харденинга Microsoft Exchange 2019 и особенностей подхода к повышению киберустойчивости.

Вебинар будет полезен архитекторам, CIO, СТО, DevOps-экспертам и техническим специалистам разных профилей. Присоединяйтесь!

*Это как «Марио тайм», время героев-экспертов харденинга

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

Читать полностью…

Anchoreum: Новая игра для изучения CSS

В этой игре вы сможете научиться работать с позиционированием CSS-якорей. Игра от создателя Flexbox Froggy и Grid Garden, так что интерфейс вполне узнаваем и принцип игры понятен.

Пройти бесплатно можно по ссылке: https://anchoreum.com/

#css

Читать полностью…

Признавайтесь, как часто у вас такое?

Читать полностью…